update readme

README.md

@@ -1,3 +1,24 @@
 # coconut-leaf
 
 A self-host, multi-account calendar system.
+
+## Warning
+
+This project still work in progress. Because this project need a massive refactor now.  
+If you want to check out the first version which can fufill basic usage, please switch to `v1-maintain` branch. In `main` branch, I am refactoring v1 and it will be updated to v2 in future.  
+The first version of this project have too much C-style JavaScript. It is too complicated to maintain and cannot add any other new features. Therefore, it needs to be fully refactored using ES6 and some modern JavaScript tools. It will come soon.
+
+## Features & shortcomings
+
+### Features
+
+* Basic calendar(valid range from 1970 to 2200)
+* Simple event system(including summary, color and etc)
+* Simple account system and share system
+* An looping event system.
+
+### Shortcomings
+
+* No extra properties for event(including location, busy status and etc. All of them can be written in summary property and extirely useless for myself. There are no plan to implement these in future.)
+* No alarm system(should be implemented in frontend in future?)
+

src/static/css/datetimepicker.css

@@ -29,6 +29,9 @@ div.perfectTable > div > div {
 
     display: flex;
     justify-content: center;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
 }
 
 div.perfectTable > div {
@@ -36,6 +39,11 @@ div.perfectTable > div {
     flex-flow: row;
 }
 
+div.perfectTable > div > div[picked=true] {
+    background: hsl(171, 100%, 41%);
+    color: #fff;
+}
+
 
 
 
@@ -64,6 +72,8 @@ div.pickerContainer > svg {
 div.pickerContainer > svg > text {
     dominant-baseline: middle;
     text-anchor: middle;
+    user-select: none;
+    cursor: default;
 }
 
 div.pickerContainer > svg > circle[type=background] {
@@ -90,7 +100,7 @@ header.pickerHeader {
     display: flex;
     flex-flow: row;
 
-    flex-grow: 1;
+    flex-grow: 0;
     flex-basis: 0;
     flex-shrink: 0;
 

src/static/i18n/strings_en-US.properties

@@ -63,7 +63,6 @@ ccn-i18n-login-form-login=Login
 
 ccn-i18n-todo-todoList=Todo list
 
-ccn-i18n-calendar-calendar-jump=Jump
 ccn-i18n-calendar-calendar-today=Today
 ccn-i18n-calendar-calendar-add=Add...
 ccn-i18n-calendar-calendar-stripedEvents={0} items

src/static/i18n/strings_zh-CN.properties

@@ -63,7 +63,6 @@ ccn-i18n-login-form-login=登录
 
 ccn-i18n-todo-todoList=待办列表
 
-ccn-i18n-calendar-calendar-jump=转到
 ccn-i18n-calendar-calendar-today=今天
 ccn-i18n-calendar-calendar-add=添加...
 ccn-i18n-calendar-calendar-stripedEvents=共{0}项
@@ -139,3 +138,16 @@ ccn-i18n-tokenItem-ua=UA：
 ccn-i18n-tokenItem-ip=IP：
 ccn-i18n-tokenItem-expireOn=过期时间: 
 ccn-i18n-tokenItem-isMe=这是你当前使用的登录凭据
+
+ccn-i18n-datetime-loopStopRuleText-infinity=永远循环。
+ccn-i18n-datetime-loopStopRuleText-datetime=到{0}停止循环。
+ccn-i18n-datetime-loopStopRuleText-times=循环{0}次。
+ccn-i18n-datetime-loopRuleText-modeStrict=严格模式。
+ccn-i18n-datetime-loopRuleText-modeRough=宽松模式。
+ccn-i18n-datetime-loopRuleText-year=每{0}年于{1}循环一次。
+ccn-i18n-datetime-loopRuleText-monthA=每{0}月的第{1}日循环一次。
+ccn-i18n-datetime-loopRuleText-monthB=每{0}月的倒数第{1}日循环一次。
+ccn-i18n-datetime-loopRuleText-monthC=每{0}月的第{1}个星期{2}循环一次。
+ccn-i18n-datetime-loopRuleText-monthD=每{0}月的倒数第{1}个星期{2}循环一次。
+ccn-i18n-datetime-loopRuleText-week=每{0}周的{1}循环一次。
+ccn-i18n-datetime-loopRuleText-day=每{0}天循环一次。

src/static/js/datetime.js

@@ -2,9 +2,9 @@
 var ccn_datetime_monthDayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
 var ccn_datetime_MIN_YEAR = 1950;
-var ccn_datetime_MAX_YEAR = 2199;
-var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(1950, 1, 1, 0, 0, 0, 0));
-var ccn_datetime_MAX_DATETIME = new Date(Date.UTC(2200, 1, 1, 0, 0, 0, 0));
+var ccn_datetime_MAX_YEAR = 2200;
+var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(ccn_datetime_MIN_YEAR, 0, 1, 0, 0, 0, 0));
+var ccn_datetime_MAX_DATETIME = new Date(Date.UTC(ccn_datetime_MAX_YEAR, 0, 1, 0, 0, 0, 0));
 var ccn_datetime_MIN_TIMESTAMP = Math.floor(ccn_datetime_MIN_DATETIME.getTime() / 60000);
 var ccn_datetime_MAX_TIMESTAMP = Math.floor(ccn_datetime_MAX_DATETIME.getTime() / 60000);
 
@@ -261,8 +261,76 @@ function ccn_datetime_ResolveLoopRules4Event(loopRules, loopDateTimeStart, loopD
     return realResult;
 }
 
-function ccn_datetime_ResolveLoopRules4Text(loopRules) {
-    return "";
+function ccn_datetime_ResolveLoopRules4Text(strl, startDateTime, timezoneOffset) {
+    if (strl == '') return "";
+
+    var sp = strl.split('-');
+    if (sp.length != 2) return "";
+    var loopRules = undefined;
+    var loopStopRules = undefined;
+    var datetimeInstance = new Date((startDateTime + timezoneOffset) * 60000)
+
+    if (ccn_datetime_precompiledLoopRules.year.test(sp[0])) {
+        if (RegExp.$1 == 'S')
+            loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-modeStrict');
+        else
+            loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-modeRough');
+        loopRules += $.i18n.prop('ccn-i18n-datetime-loopRuleText-year')
+        .format(parseInt(RegExp.$2), datetimeInstance.toLocaleDateString(undefined, {timeZone: "UTC"}));
+    } else if (ccn_datetime_precompiledLoopRules.month.test(sp[0])) {
+        if (RegExp.$1 == 'S')
+            loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-modeStrict');
+        else
+            loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-modeRough');
+
+        var dayInMonth = ccn_datetime_GetDayInMonth(
+            datetimeInstance.getUTCFullYear(), 
+            datetimeInstance.getUTCMonth() + 1,
+            datetimeInstance.getUTCDate());
+        switch(RegExp.$2) {
+            case 'A':
+                loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-monthA')
+                .format(parseInt(RegExp.$3), dayInMonth[0]);
+                break;
+            case 'B':
+                loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-monthB')
+                .format(parseInt(RegExp.$3), dayInMonth[1]);
+                break;
+            case 'C':
+                loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-monthC')
+                .format(parseInt(RegExp.$3), dayInMonth[2], dayInMonth[3]);
+                break;
+            case 'D':
+                loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-monthD')
+                .format(parseInt(RegExp.$3), dayInMonth[4], dayInMonth[5]);
+                break;
+        }
+    } else if (ccn_datetime_precompiledLoopRules.week.test(sp[0])) {
+        var weekOfDayCache = [];
+        for (var i = 0; i < 7; i++) {
+            if (RegExp.$1[i] == 'T')
+                weekOfDayCache.push(ccn_i18n_UniversalGetDayOfWeek(i));
+        }
+
+        loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-week')
+        .format(parseInt(RegExp.$2), weekOfDayCache.join(', '));
+    } else if (ccn_datetime_precompiledLoopRules.day.test(sp[0])) {
+        loopRules = $.i18n.prop('ccn-i18n-datetime-loopRuleText-day')
+        .format(parseInt(RegExp.$1));
+    } else return "";
+
+
+    if (ccn_datetime_precompiledLoopStopRules.infinity.test(sp[1])) {
+        loopStopRules = $.i18n.prop('ccn-i18n-datetime-loopStopRuleText-infinity');
+    } else if (ccn_datetime_precompiledLoopStopRules.datetime.test(sp[1])) {
+        loopStopRules = $.i18n.prop('ccn-i18n-datetime-loopStopRuleText-datetime')
+        .format(new Date(parseInt(RegExp.$1)).toLocaleDateString());
+    } else if (ccn_datetime_precompiledLoopStopRules.times.test(sp[1])) {
+        loopStopRules = $.i18n.prop('ccn-i18n-datetime-loopStopRuleText-times')
+        .format(parseInt(RegExp.$1));
+    } else return "";
+
+    return (loopRules + loopStopRules);
 }
 
 function ccn_datetime_LeapYearCountEx(endYear, includeThis, baseYear, includeBase) {

src/static/js/datetimepicker.js

@@ -5,37 +5,132 @@ var ccn_datetimepicker_tabType = {
     hour: 3,
     minute: 4
 };
-var ccn_datetimepicker_currentTab = undefined;
+
+var ccn_datetimepicker_dialPlateWidth = 200;
+var ccn_datetimepicker_dialPlateRadius = ccn_datetimepicker_dialPlateWidth / 2;
+var ccn_datetimepicker_dialPlateHourInnerPercent = 0.6;
+var ccn_datetimepicker_dialPlateHourOutterPercent = 0.8;
+var ccn_datetimepicker_dialPlateHourDistinguishPercent = 0.7;
+var ccn_datetimepicker_dialPlateMinutePercent = 0.8;
+var ccn_datetimepicker_dialPlateHourResolution = Math.PI * 2 / 12;
+var ccn_datetimepicker_dialPlateMinuteResolution = Math.PI * 2 / 60;
 
 var ccn_datetimepicker_mode = undefined;
-var ccn_datetimepicker_pickerIndex = undefined;
 var ccn_datetimepicker_isUTC = undefined;
-var ccn_datetimepicker_callbackFunc = undefined;
+var ccn_datetimepicker_pickerIndex = undefined;
 
-var internalDateTime = new Date();
+var ccn_datetimepicker_enableMinuteDrag = false;
+var ccn_datetimepicker_enableHourDrag = false;
+
+var ccn_datetimepicker_internalDateTime = new Date();
+var ccn_datetimepicker_displayCacheDateTime = new Date();
 
 // ========================================= export func
 
 function ccn_datetimepicker_Insert() {
     $('body').append(ccn_template_datetimepicker.render());
 
-    // bind event and trigge once
-    $(window).resize(function (){
-        $('div.pickerContainer > svg').each(function (){
-            ccn_datetimepicker_OnSvgResize($(this));
-        });
-    }).resize();
+    // bind size event and trigge once
+    $(window).resize(ccn_datetimepicker_RefreshSvg).resize();
+
+    // add data attr
+    for(var i = 0; i < 3; i++) {
+        for(var j = 0; j < 4; j++) {
+            $('#ccn-datetimepiacker-panelMonth-table > div:nth-child({0}) > div:nth-child({1})'.format(i + 1, j + 1))
+            .attr('data', i * 4 + j);
+        }
+    }
+
+    // bind header event
+    $('header.pickerHeader > div').click(function() {
+        ccn_datetimepicker_SwitchTab(ccn_datetimepicker_Str2TabType($(this).attr('type')));
+    });
+
+    // bind button event
+    $('#ccn-datetimepiacker-panelYear-prevBtn').click(function() {
+        ccn_datetimepicker_PrevNextYear(true);
+    });
+    $('#ccn-datetimepiacker-panelYear-nextBtn').click(function() {
+        ccn_datetimepicker_PrevNextYear(false);
+    });
+    $('#ccn-datetimepiacker-panelMonth-prevBtn').click(function() {
+        ccn_datetimepicker_PrevNextMonth(true);
+    });
+    $('#ccn-datetimepiacker-panelMonth-nextBtn').click(function() {
+        ccn_datetimepicker_PrevNextMonth(false);
+    });
+    $('#ccn-datetimepiacker-panelDay-prevBtn').click(function() {
+        ccn_datetimepicker_PrevNextDay(true);
+    });
+    $('#ccn-datetimepiacker-panelDay-nextBtn').click(function() {
+        ccn_datetimepicker_PrevNextDay(false);
+    });
+
+    $('#ccn-datetimepiacker-panelYear-table > div > div').click(ccn_datetimepicker_ClickYear);
+    $('#ccn-datetimepiacker-panelMonth-table > div > div').click(ccn_datetimepicker_ClickMonth);
+    $('#ccn-datetimepiacker-panelDay-table > div:nth-child(n+1) > div').click(ccn_datetimepicker_ClickDay);
+
+    $('#ccn-datetimepicker-panelHour')
+    .mousedown(ccn_datetimepicker_StartDragHour)
+    .mousemove(ccn_datetimepicker_DraggingHour)
+    .mouseup(ccn_datetimepicker_StopDragHour)
+    .on('touchstart', ccn_datetimepicker_StartDragHour)
+    .on('touchmove', ccn_datetimepicker_DraggingHour)
+    .on('touchend', ccn_datetimepicker_StopDragHour);
+
+    $('#ccn-datetimepicker-panelMinute')
+    .mousedown(ccn_datetimepicker_StartDragMinute)
+    .mousemove(ccn_datetimepicker_DraggingMinute)
+    .mouseup(ccn_datetimepicker_StopDragMinute)
+    .on('touchstart', ccn_datetimepicker_StartDragMinute)
+    .on('touchmove', ccn_datetimepicker_DraggingMinute)
+    .on('touchend', ccn_datetimepicker_StopDragMinute);
+
+    $('#ccn-datetimepicker-btnConfirm').click(ccn_datetimepicker_Confirm);
+    $('#ccn-datetimepicker-btnCancel').click(ccn_datetimepicker_Cancel);
+
 }
 
-function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC, callbackFunc) {
+function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC) {
     ccn_datetimepicker_mode = mode;
-    ccn_datetimepicker_pickerIndex = pickerIndex;
     ccn_datetimepicker_isUTC = isUTC;
-    ccn_datetimepicker_callbackFunc = callbackFunc;
+    ccn_datetimepicker_pickerIndex = pickerIndex;
 
-    ccn_datetimepicker_SwitchTab(mode);
+    ccn_datetimepicker_internalDateTime = ccn_datetimepicker_Get(pickerIndex, false);
 
-    $('#ccn-datetimepicker-modal').show();
+    $('header.pickerHeader > div').hide();
+    switch(mode) {
+        case ccn_datetimepicker_tabType.minute:
+            $('header.pickerHeader > div[type=minute]').show();
+        case ccn_datetimepicker_tabType.hour:
+            $('header.pickerHeader > div[type=hour]').show();
+        case ccn_datetimepicker_tabType.day:
+            $('header.pickerHeader > div[type=day]').show();
+        case ccn_datetimepicker_tabType.month:
+            $('header.pickerHeader > div[type=month]').show();
+        case ccn_datetimepicker_tabType.year:
+            $('header.pickerHeader > div[type=year]').show();
+            break;
+    }
+
+    $('#ccn-datetimepicker-modal').addClass('is-active');
+    ccn_datetimepicker_SwitchTab(mode); // this call is set in there by design. if you don't show the dialog, the call of svg resize will fail.
+}
+
+function ccn_datetimepicker_Confirm() {
+    // update and call callback func
+    ccn_datetimepicker_Set(
+        ccn_datetimepicker_pickerIndex, 
+        ccn_datetimepicker_internalDateTime, 
+        ccn_datetimepicker_isUTC, 
+        ccn_datetimepicker_mode
+    );
+
+    $('#ccn-datetimepicker-modal').removeClass('is-active');
+}
+
+function ccn_datetimepicker_Cancel() {
+    $('#ccn-datetimepicker-modal').removeClass('is-active');
 }
 
 // ========================================= internal func
@@ -46,95 +141,367 @@ function ccn_datetimepicker_OnSvgResize(ele) {
 }
 
 function ccn_datetimepicker_SwitchTab(newTab) {
-    $('div.pickerContainer > svg').hide();
+    $('div.pickerContainer > *').hide();
+
+    ccn_datetimepicker_displayCacheDateTime.setTime(ccn_datetimepicker_internalDateTime.getTime());
+    ccn_datetimepicker_RefreshDisplay(newTab);
+
     switch(newTab) {
         case ccn_datetimepicker_tabType.year:
-            $('#ccn-datetimepicker-panel-year').show();
+            $('#ccn-datetimepicker-panelYear').show();
             break;
         case ccn_datetimepicker_tabType.month:
-            $('#ccn-datetimepicker-panel-month').show();
+            $('#ccn-datetimepicker-panelMonth').show();
             break;
         case ccn_datetimepicker_tabType.day:
-            $('#ccn-datetimepicker-panel-day').show();
+            $('#ccn-datetimepicker-panelDay').show();
             break;
         case ccn_datetimepicker_tabType.hour:
-            ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-hour').show());
+            $('#ccn-datetimepicker-panelHour').show();
+            ccn_datetimepicker_RefreshSvg();    // immediately trigger once svg resize
             break;
         case ccn_datetimepicker_tabType.minute:
-            ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-minute').show());
+            $('#ccn-datetimepicker-panelMinute').show();
+            ccn_datetimepicker_RefreshSvg();    // immediately trigger once svg resize
             break;
     }
 }
 
-function ccn_datetimepicker_RefreshDisplayDateTime() {
+function ccn_datetimepicker_RefreshDisplay(tab) {
+    // header should be refreshed entirely
+    $('#ccn-datetimepicker-datetime-year').text(ccn_datetimepicker_internalDateTime.getFullYear());
+    $('#ccn-datetimepicker-datetime-month').text(ccn_datetimepicker_internalDateTime.getMonth() + 1);
+    $('#ccn-datetimepicker-datetime-day').text(ccn_datetimepicker_internalDateTime.getDate());
+    $('#ccn-datetimepicker-datetime-hour').text(ccn_datetimepicker_internalDateTime.getHours());
+    $('#ccn-datetimepicker-datetime-minute').text(ccn_datetimepicker_internalDateTime.getMinutes());
 
-}
+    // refresh tab according to specific `tab`
+    switch(tab) {
+        case ccn_datetimepicker_tabType.year:
+            var startYear = Math.floor((ccn_datetimepicker_displayCacheDateTime.getFullYear() - ccn_datetime_MIN_YEAR) / 12) * 12 + ccn_datetime_MIN_YEAR;
+            var counter = startYear;
+            for(var i = 0; i < 3; i++) {
+                for(var j = 0; j < 4; j++, counter++) {
+                    var ele = $('#ccn-datetimepiacker-panelYear-table > div:nth-child({0}) > div:nth-child({1})'.format(i + 1, j + 1));
+                    if (counter < ccn_datetime_MAX_YEAR) {
+                        ele.attr('data', counter)
+                        .text(counter);
+                    } else {
+                        ele.attr('data', '')
+                        .html('&nbsp;');
+                    }
 
+                    if (counter == ccn_datetimepicker_internalDateTime.getFullYear()) ele.attr('picked', 'true');
+                    else ele.attr('picked', 'false');
+                }
+            }
 
-function ccn_datetimepicker_Init() {
-    var nowtime = new Date();
+            $('#ccn-datetimepiacker-panelYear-title')
+            .text('{0} - {1}'.format(startYear, startYear + 12 < ccn_datetime_MAX_YEAR ? startYear + 12 : ccn_datetime_MAX_YEAR));
 
-    $('.datetimepicker-year').attr('min', ccn_datetime_MIN_YEAR)
-    .attr('max', ccn_datetime_MAX_YEAR)
-    .attr('step', 1)
-    .val(nowtime.getFullYear())
-    .bind('input propertychange', ccn_datetimepicker_Sync);
+            break;
+        case ccn_datetimepicker_tabType.month:
+            $('#ccn-datetimepiacker-panelMonth-table > div > div').attr('picked', 'false');
+            if (ccn_datetimepicker_internalDateTime.getFullYear() == ccn_datetimepicker_displayCacheDateTime.getFullYear()) {
+                var month = ccn_datetimepicker_internalDateTime.getMonth();
+                $('#ccn-datetimepiacker-panelMonth-table > div:nth-child({0}) > div:nth-child({1})'.format(Math.floor(month / 4) + 1, (month % 4) + 1))
+                .attr('picked', 'true');
+            }
 
-    $('.datetimepicker-month').attr('min', 1)
-    .attr('max', 12)
-    .attr('step', 1)
-    .val(nowtime.getMonth() + 1)
-    .bind('input propertychange', ccn_datetimepicker_Sync);
+            $('#ccn-datetimepiacker-panelMonth-title')
+            .text(ccn_datetimepicker_displayCacheDateTime.getFullYear());
             
-    $('.datetimepicker-day').attr('min', 1)
-    .attr('step', 1)
-    .each(function(){
-        ccn_datetimepicker_SyncEx($(this).attr("datetimepicker"));
-    })
-    .val(nowtime.getDate());
+            break;
+        case ccn_datetimepicker_tabType.day:
+            var gottenYear = ccn_datetimepicker_displayCacheDateTime.getFullYear();
+            var gottenMonth = ccn_datetimepicker_displayCacheDateTime.getMonth() + 1;
+            var counter = -ccn_datetime_DayOfWeek(gottenYear, gottenMonth,  1);
+            var days = ccn_datetime_monthDayCount[gottenMonth - 1] + ((gottenMonth == 2 && ccn_datetime_IsLeapYear(gottenYear)) ? 1 : 0);
+            for(var i = 0; i < 6; i++) {
+                for(var j = 0; j < 7; j++, counter++) {
+                    var ele = $('#ccn-datetimepiacker-panelDay-table > div:nth-child({0}) > div:nth-child({1})'.format(i + 2, j + 1));
+                    if (counter < 0 || counter >= days) ele.attr('data', '').html('&nbsp;');
+                    else ele.attr('data', counter + 1).text(counter + 1);
                     
-    $('.datetimepicker-hour').attr('min', 0)
-    .attr('max', 23)
-    .attr('step', 1)
-    .val(nowtime.getHours());
+                    if (counter + 1 == ccn_datetimepicker_internalDateTime.getDate()) ele.attr('picked', 'true');
+                    else ele.attr('picked', 'false');
+                }
+            }
 
-    $('.datetimepicker-minute').attr('min', 0)
-    .attr('max', 59)
-    .attr('step', 1)
-    .val(nowtime.getMinutes());
-}
+            $('#ccn-datetimepiacker-panelDay-title')
+            .text('{0} - {1}'.format(
+                ccn_datetimepicker_displayCacheDateTime.getFullYear(),
+                ccn_i18n_UniversalGetMonth(ccn_datetimepicker_displayCacheDateTime.getMonth())
+            ));
 
-function ccn_datetimepicker_Sync() {
-    var pickerIndex = $(this).attr("datetimepicker");
-    ccn_datetimepicker_SyncEx(pickerIndex);
-}
+            break;
+        case ccn_datetimepicker_tabType.hour:
+            var gottenHour = ccn_datetimepicker_displayCacheDateTime.getHours();
+            var newX = Math.cos((3 - gottenHour) * Math.PI * 2 / 12);
+            var newY = Math.sin((3 - gottenHour) * Math.PI * 2 / 12);
+            var radius = ccn_datetimepicker_dialPlateRadius * (gottenHour < 12 ? ccn_datetimepicker_dialPlateHourOutterPercent : ccn_datetimepicker_dialPlateHourInnerPercent);
+            newX = newX * radius + ccn_datetimepicker_dialPlateRadius;
+            newY = (-newY * radius) + ccn_datetimepicker_dialPlateRadius;
 
-function ccn_datetimepicker_SyncEx(pickerIndex) {
-    year = parseInt($('.datetimepicker-year[datetimepicker=' + pickerIndex + ']').val());
-    month = parseInt($('.datetimepicker-month[datetimepicker=' + pickerIndex + ']').val());
+            $('#ccn-datetimepicker-panelHour > line')
+            .attr('x2', newX)
+            .attr('y2', newY);
 
-    dayDOM = $('.datetimepicker-day[datetimepicker=' + pickerIndex + ']');
-    if (typeof(year) == 'undefined' || typeof(month) == 'undefined') {
-        dayDOM.attr('max', 1)
-        .val(1);
-    } else {
-        dayDOM.attr('max', ccn_datetime_monthDayCount[month - 1] + ((month == 2 && ccn_datetime_IsLeapYear(year) ? 1 : 0)))
-        .val(1);
+            $('#ccn-datetimepicker-panelHour > circle[type=symbol]')
+            .attr('cx', newX)
+            .attr('cy', newY);
+            
+            break;
+        case ccn_datetimepicker_tabType.minute:
+            var gottenMinute = ccn_datetimepicker_displayCacheDateTime.getMinutes();
+            var newX = Math.cos((15 - gottenMinute) * Math.PI * 2 / 60);
+            var newY = Math.sin((15 - gottenMinute) * Math.PI * 2 / 60);
+            var radius = ccn_datetimepicker_dialPlateRadius * ccn_datetimepicker_dialPlateMinutePercent;
+            newX = newX * radius + ccn_datetimepicker_dialPlateRadius;
+            newY = (-newY * radius) + ccn_datetimepicker_dialPlateRadius;
+
+            $('#ccn-datetimepicker-panelMinute > line')
+            .attr('x2', newX)
+            .attr('y2', newY);
+
+            $('#ccn-datetimepicker-panelMinute > circle[type=symbol]')
+            .attr('cx', newX)
+            .attr('cy', newY);
+            
+            break;
     }
 }
 
+function ccn_datetimepicker_RefreshSvg() {
+    // svg resize only can be called when the svg is showing.
+    // so call this func in window resize event or
+    // displaying svg.
+    $('div.pickerContainer > svg').each(function() {
+        ccn_datetimepicker_OnSvgResize($(this));
+    });
+}
+
+function ccn_datetimepicker_Str2TabType(strl) {
+    switch(strl) {
+        case 'year':
+            return ccn_datetimepicker_tabType.year
+        case 'month':
+            return ccn_datetimepicker_tabType.month
+        case 'day':
+            return ccn_datetimepicker_tabType.day
+        case 'hour':
+            return ccn_datetimepicker_tabType.hour
+        case 'minute':
+            return ccn_datetimepicker_tabType.minute
+    }
+    return undefined;
+}
+
+function ccn_datetimepicker_GetUniformedXY(mouseOrTouchEvent, elements) {
+    var offset = {
+        left: elements.offset().left,
+        top: elements.offset().top,
+        halfWidth: elements.width() / 2,
+        halfHeight: elements.height() / 2,
+        halfSquareWidthHeight: Math.min(elements.width(), elements.height()) / 2
+    }
+    if(typeof(mouseOrTouchEvent.pageX) != 'undefined' && typeof(mouseOrTouchEvent.pageY) != 'undefined') {
+        offset.realX = mouseOrTouchEvent.pageX;
+        offset.realY = mouseOrTouchEvent.pageY;
+    } else if(typeof(mouseOrTouchEvent.targetTouches) != 'undefined' && mouseOrTouchEvent.targetTouches.length >= 1) {
+        offset.realX = mouseOrTouchEvent.targetTouches[0].pageX;
+        offset.realY = mouseOrTouchEvent.targetTouches[0].pageY;
+    } else {
+        offset.realX = 0;
+        offset.realY = 0;
+    }
+
+    var _x = (offset.realX - offset.left - offset.halfWidth) / offset.halfSquareWidthHeight * ccn_datetimepicker_dialPlateRadius;
+    var _y = -((offset.realY - offset.top - offset.halfHeight) / offset.halfSquareWidthHeight * ccn_datetimepicker_dialPlateRadius);
+
+    return {x: _x, y: _y};
+}
+
+function ccn_datetimepicker_PrevNextYear(isPrev) {
+    ccn_datetimepicker_displayCacheDateTime.setFullYear(
+        ccn_datetimepicker_displayCacheDateTime.getFullYear() + (isPrev ? -12 : 12));
+
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_displayCacheDateTime);
+    ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.year);
+}
+
+function ccn_datetimepicker_PrevNextMonth(isPrev) {
+    ccn_datetimepicker_displayCacheDateTime.setFullYear(
+        ccn_datetimepicker_displayCacheDateTime.getFullYear() + (isPrev ? -1 : 1));
+
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_displayCacheDateTime);
+    ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.month);
+}
+
+function ccn_datetimepicker_PrevNextDay(isPrev) {
+    ccn_datetimepicker_displayCacheDateTime.setMonth(
+        ccn_datetimepicker_displayCacheDateTime.getMonth() + (isPrev ? -1 : 1));
+
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_displayCacheDateTime);
+    ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.day);
+}
+
+function ccn_datetimepicker_ClickYear() {
+    var ele = $(this);
+    if (ele.attr('data') == '') return;
+
+    ccn_datetimepicker_internalDateTime.setFullYear(parseInt(ele.attr('data')));
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_internalDateTime);
+
+    if (ccn_datetimepicker_mode != ccn_datetimepicker_tabType.year)
+        ccn_datetimepicker_SwitchTab(ccn_datetimepicker_tabType.month);
+    else
+        ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.year);
+}
+
+function ccn_datetimepicker_ClickMonth() {
+    var ele = $(this);
+    if (ele.attr('data') == '') return;
+
+    ccn_datetimepicker_internalDateTime.setFullYear(
+        ccn_datetimepicker_displayCacheDateTime.getFullYear(),
+        parseInt(ele.attr('data'))
+    );
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_internalDateTime);
+
+    if (ccn_datetimepicker_mode != ccn_datetimepicker_tabType.month)
+        ccn_datetimepicker_SwitchTab(ccn_datetimepicker_tabType.day);
+    else
+        ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.month);
+}
+
+function ccn_datetimepicker_ClickDay() {
+    var ele = $(this);
+    if (ele.attr('data') == '') return;
+
+    ccn_datetimepicker_internalDateTime.setFullYear(
+        ccn_datetimepicker_displayCacheDateTime.getFullYear(),
+        ccn_datetimepicker_displayCacheDateTime.getMonth(),
+        parseInt(ele.attr('data'))
+    );
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_internalDateTime);
+
+    if (ccn_datetimepicker_mode != ccn_datetimepicker_tabType.day)
+        ccn_datetimepicker_SwitchTab(ccn_datetimepicker_tabType.hour);
+    else
+        ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.day);
+}
+
+
+function ccn_datetimepicker_StartDragHour() { ccn_datetimepicker_enableHourDrag = true; }
+function ccn_datetimepicker_DraggingHour(e) {
+    if (!ccn_datetimepicker_enableHourDrag) return;
+
+    var offset = ccn_datetimepicker_GetUniformedXY(e, $('#ccn-datetimepicker-panelHour'));
+    var x = offset.x;
+    var y = offset.y;
+
+    var distance = Math.sqrt(x * x + y * y);
+    var angle = Math.acos(x / distance);
+    if (y < 0) angle = Math.PI * 2 - angle; // correct negative y axis angle
+
+    angle += (ccn_datetimepicker_dialPlateHourResolution / 2); // correct offset
+    if (angle > Math.PI * 2)
+        angle -= Math.PI * 2;
+
+    var number = Math.floor(angle / ccn_datetimepicker_dialPlateHourResolution);
+    if (number >= 12) number = 11; // prevent unexpected result at the edge.
+    number = (15 - number) % 12;
+    if (distance < ccn_datetimepicker_dialPlateRadius * ccn_datetimepicker_dialPlateHourDistinguishPercent)
+        number += 12;
+
+    // judge
+    if (ccn_datetimepicker_displayCacheDateTime.getHours() != number) {
+        ccn_datetimepicker_displayCacheDateTime.setHours(number);
+        ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.hour);
+    }
+    
+    e.preventDefault();
+}
+function ccn_datetimepicker_StopDragHour() { 
+    ccn_datetimepicker_enableHourDrag = false;
+
+    ccn_datetimepicker_internalDateTime.setHours(ccn_datetimepicker_displayCacheDateTime.getHours());
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_internalDateTime);
+
+    if (ccn_datetimepicker_mode != ccn_datetimepicker_tabType.hour)
+        ccn_datetimepicker_SwitchTab(ccn_datetimepicker_tabType.minute);
+}
+
+
+function ccn_datetimepicker_StartDragMinute() { ccn_datetimepicker_enableMinuteDrag = true; }
+function ccn_datetimepicker_DraggingMinute(e) {
+    if (!ccn_datetimepicker_enableMinuteDrag) return;
+
+    var offset = ccn_datetimepicker_GetUniformedXY(e, $('#ccn-datetimepicker-panelMinute'));
+    var x = offset.x;
+    var y = offset.y;
+
+    var distance = Math.sqrt(x * x + y * y);
+    var angle = Math.acos(x / distance);
+    if (y < 0) angle = Math.PI * 2 - angle; // correct negative y axis angle
+
+    angle += (ccn_datetimepicker_dialPlateMinuteResolution / 2); // correct offset
+    if (angle > Math.PI * 2)
+        angle -= Math.PI * 2;
+
+    var number = Math.floor(angle / ccn_datetimepicker_dialPlateMinuteResolution);
+    if (number >= 60) number = 59; // prevent unexpected result at the edge.
+    number = (75 - number) % 60;
+
+    // judge
+    if (ccn_datetimepicker_displayCacheDateTime.getMinutes() != number) {
+        ccn_datetimepicker_displayCacheDateTime.setMinutes(number);
+        ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.minute);
+    }
+
+    e.preventDefault();
+}
+function ccn_datetimepicker_StopDragMinute() { 
+    ccn_datetimepicker_enableMinuteDrag = false;
+
+    ccn_datetimepicker_internalDateTime.setMinutes(ccn_datetimepicker_displayCacheDateTime.getMinutes());
+    ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_internalDateTime);
+
+    // no page need to go to
+    // but we need refresh current page
+    ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.minute);
+}
+
+
+function ccn_datetimepicker_ClampDateTime(dateObj) {
+    if (dateObj < ccn_datetime_MIN_DATETIME)
+        dateObj.setTime(ccn_datetime_MIN_DATETIME.getTime());
+    if (dateObj >= ccn_datetime_MAX_DATETIME)
+        dateObj.setTime(ccn_datetime_MAX_DATETIME.getTime());
+}
+
+// ========================================================== universal function
+
 function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) {
     var ele = $('[datetimepicker=' + pickerIndex + ']');
-    if (mode < ccn_datetimepicker_tabType.year) return;
-    ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear());
-    if (mode < ccn_datetimepicker_tabType.month) return;
-    ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1);
-    if (mode < ccn_datetimepicker_tabType.day) return;
-    ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate());
-    if (mode < ccn_datetimepicker_tabType.hour) return;
-    ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours());
-    if (mode < ccn_datetimepicker_tabType.minute) return;
-    ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes());
+    while(true) {
+        if (mode < ccn_datetimepicker_tabType.year) break;
+        ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear());
+        if (mode < ccn_datetimepicker_tabType.month) break;
+        ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1);
+        if (mode < ccn_datetimepicker_tabType.day) break;
+        ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate());
+        if (mode < ccn_datetimepicker_tabType.hour) break;
+        ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours());
+        if (mode < ccn_datetimepicker_tabType.minute) break;
+        ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes());
+
+        break;
+    }
+
+    if (typeof(ele.prop('funcs')) != 'undefined' && typeof(ele.prop('funcs').callback) == 'function')
+        ele.prop('funcs').callback();
 }
 
 function ccn_datetimepicker_Get(pickerIndex, isUTC) {

src/static/js/i18n.js

@@ -76,3 +76,14 @@ function ccn_i18n_ApplyLanguage2Content(ctx) {
         $(this).html($.i18n.prop($(this).attr('i18n-name')));
     });
 }
+
+// note: month is zero based
+function ccn_i18n_UniversalGetMonth(month) {
+    return $.i18n.prop('ccn-i18n-universal-month-' + (month + 1));
+}
+
+// note: day of week is zero based
+function ccn_i18n_UniversalGetDayOfWeek(dayOfWeek) {
+    return $.i18n.prop('ccn-i18n-universal-week-' + (dayOfWeek + 1));
+}
+

src/static/js/page/calendar.js

@@ -30,9 +30,10 @@ $(document).ready(function() {
     // process calendar it self
     ccn_calendar_calendar_LoadCalendarBody();
 
-    // init datetimepicker
+    // init datetimepicker and preset
     ccn_datetimepicker_Insert();
-    ccn_datetimepicker_Init();
+    var nowtime = new Date();
+    ccn_datetimepicker_Set(1, nowtime, false, ccn_datetimepicker_tabType.month);
 
     // bind tab control switcher and set current tab
     $("#tabcontrol-tab-1-1").click(function(){
@@ -59,7 +60,14 @@ $(document).ready(function() {
     // bind event
     $('#ccn-calendar-collection-btnRefresh').click(ccn_calendar_collection_Refresh);
 
-    $('#ccn-calendar-calendar-btnJump').click(ccn_calendar_calendar_btnRefresh);
+    $('#ccn-calendar-calendar-btnJump')
+    .prop('funcs', {callback: ccn_calendar_calendar_btnRefresh})
+    .click(function() {
+        ccn_datetimepicker_Modal(
+            ccn_datetimepicker_tabType.month, 
+            1, 
+            false);
+    });
     $('#ccn-calendar-calendar-btnToday').click(ccn_calendar_calendar_btnToday);
     $('#ccn-calendar-calendar-btnAdd').click(ccn_calendar_calendar_btnAdd);
 });
@@ -75,6 +83,7 @@ function ccn_calendar_calendar_Refresh() {
     var gottenDateTime = ccn_datetimepicker_Get(1, false);
     var gottenYear = gottenDateTime.getFullYear();
     var gottenMonth = gottenDateTime.getMonth() + 1;
+    $('#ccn-calendar-calendar-textMonth').text('{0} - {1}'.format(gottenYear, ccn_i18n_UniversalGetMonth(gottenMonth - 1)));
     // don't need to set anything, because its default value is enough to use.
 
     var gottenWeek = ccn_datetime_DayOfWeek(gottenYear, gottenMonth, 1);
@@ -148,13 +157,13 @@ function ccn_calendar_calendar_Analyse() {
                         color: deserializedDescription.color,
                         isVisible: true,
                         isLocked: typeof(ccn_calendar_owned_displayCache[item[0]]) != 'undefined',
-                        loopText: " ",  // todo: finish this
+                        loopText: ccn_datetime_ResolveLoopRules4Text(item[8], item[5], item[7]),
                         timezoneWarning: mytimezone != item[7],
                         start: eventDateTime.toLocaleTimeString(),
                         end: undefined  // filled in follwing code
                     }
                     eventDateTime.setHours(23, 59, 0, 0);
-                    if (Math.floor(eventDateTime.getTime() / 60000) > it[1]) {
+                    if (it[1] <= Math.floor(eventDateTime.getTime() / 60000)) {
                         exitFlag = true;
                         eventDateTime.setTime(it[1] * 60000);
                     }
@@ -248,7 +257,7 @@ function ccn_calendar_calendar_btnRefresh() {
 
 function ccn_calendar_calendar_btnToday() {
     var nowtime = new Date();
-    ccn_datetimepicker_Set(1, nowtime, false);
+    ccn_datetimepicker_Set(1, nowtime, false, ccn_datetimepicker_tabType.month);
     ccn_calendar_calendar_Refresh();
     ccn_calendar_calendar_Analyse();
     ccn_calendar_calendar_Render();

src/static/js/page/event.js

@@ -20,7 +20,6 @@ $(document).ready(function() {
 
     // init datetimepicker
     ccn_datetimepicker_Insert();
-    ccn_datetimepicker_Init();
 
     // apply i18n
     ccn_i18n_LoadLanguage();
@@ -29,15 +28,23 @@ $(document).ready(function() {
     // bind event
     $('input[type=radio][name=loop-method]').click(ccn_event_RefreshRadioDiaplay);
     $('input[type=radio][name=loop-end]').click(ccn_event_RefreshRadioDiaplay);
-    $('.datetimepicker-year[datetimepicker=1],.datetimepicker-month[datetimepicker=1],.datetimepicker-day[datetimepicker=1]').bind(
-        'input propertychange',
-        ccn_event_RefreshLoopMonthType
-    );
 
     $('#ccn-event-btnSubmit').click(ccn_event_btnSubmit);
     $('#ccn-event-btnCancel').click(ccn_event_btnCancel);
     $('#ccn-event-btnSpot').click(ccn_event_btnSpot);
     $('#ccn-event-btnFullDay').click(ccn_event_btnFullDay);
+    $('#ccn-event-btnStartDateTime')
+    .prop('funcs', {callback: function() {
+        ccn_event_UpdateDateTimePickerButton(1);
+        ccn_event_RefreshLoopMonthType();
+    }})
+    .click(ccn_event_btnDateTimePicker);
+    $('#ccn-event-btnEndDateTime')
+    .prop('funcs', {callback: function() {ccn_event_UpdateDateTimePickerButton(2);}})
+    .click(ccn_event_btnDateTimePicker);
+    $('#ccn-event-btnLoopStopDateTime')
+    .prop('funcs', {callback: function() {ccn_event_UpdateDateTimePickerButton(3);}})
+    .click(ccn_event_btnDateTimePicker);
 
     // init form
     ccn_event_Init();
@@ -61,9 +68,6 @@ function ccn_event_Init() {
     .attr('step', 1)
     .val(1);
 
-    // now, init 3 datetimepicker
-    //ccn_datetimepicker_Init();
-
     // in there, we need get uuid from meta
     var uuid = $('meta[name=uuid]').attr('content');
     if (uuid != "")
@@ -243,6 +247,26 @@ function ccn_event_RefreshLoopMonthType() {
     $('#ccn-event-loopMonth-textD').text($.i18n.prop('ccn-i18n-event-loopWeek-optionD').format(data[4], data[5] + 1));
 }
 
+function ccn_event_UpdateDateTimePickerButton(index) {
+    switch(index) {
+        case 1:
+            $('#ccn-event-btnStartDateTime-text').text(
+                ccn_datetimepicker_Get(1, false).toLocaleString()
+            );
+            break;
+        case 2:
+            $('#ccn-event-btnEndDateTime-text').text(
+                ccn_datetimepicker_Get(2, false).toLocaleString()
+            );
+            break;
+        case 3:
+            $('#ccn-event-btnLoopStopDateTime-text').text(
+                ccn_datetimepicker_Get(3, false).toLocaleDateString()
+            );
+            break;
+    }
+}
+
 // return undefined to indicate an error
 // or
 // [belongTo, title, description, eventDateTimeStart, eventDateTimeEnd, timezoneOffset, loopRules]
@@ -366,6 +390,20 @@ function ccn_event_btnFullDay() {
     ccn_datetimepicker_Set(2, datetime, false);
 }
 
+function ccn_event_btnDateTimePicker() {
+    switch(parseInt($(this).attr('datetimepicker'))) {
+        case 1:
+            ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.minute, 1, false);
+            break;
+        case 2:
+            ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.minute, 2, false);
+            break;
+        case 3:
+            ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.day, 3, false);
+            break;
+    }
+}
+
 function ccn_event_btnCancel() {
     window.location.href = '/web/calendar';
 }

src/static/tmpl/datetimepicker.tmpl

@@ -1,74 +1,74 @@
-<div id="ccn-datetimepicker-modal" class="modal is-active" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
+<div id="ccn-datetimepicker-modal" class="modal" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
     <div class="modal-background"></div>
     <div class="modal-card" style="height: 70%;">
         <header class="modal-card-head pickerHeader">
-            <div><small i18n-name="ccn-i18n-universal-text-year"></small><span id="ccn-datetimepicker-datetime-year">&nbsp;</span></div>
-            <div><small i18n-name="ccn-i18n-universal-text-month"></small><span id="ccn-datetimepicker-datetime-month">&nbsp;</span></div>
-            <div><small i18n-name="ccn-i18n-universal-text-day"></small><span id="ccn-datetimepicker-datetime-day">&nbsp;</span></div>
-            <div><small i18n-name="ccn-i18n-universal-text-hour"></small><span id="ccn-datetimepicker-datetime-hour">&nbsp;</span></div>
-            <div><small i18n-name="ccn-i18n-universal-text-minute"></small><span id="ccn-datetimepicker-datetime-minute">&nbsp;</span></div>
+            <div type="year"><small i18n-name="ccn-i18n-universal-text-year"></small><span id="ccn-datetimepicker-datetime-year">&nbsp;</span></div>
+            <div type="month"><small i18n-name="ccn-i18n-universal-text-month"></small><span id="ccn-datetimepicker-datetime-month">&nbsp;</span></div>
+            <div type="day"><small i18n-name="ccn-i18n-universal-text-day"></small><span id="ccn-datetimepicker-datetime-day">&nbsp;</span></div>
+            <div type="hour"><small i18n-name="ccn-i18n-universal-text-hour"></small><span id="ccn-datetimepicker-datetime-hour">&nbsp;</span></div>
+            <div type="minute"><small i18n-name="ccn-i18n-universal-text-minute"></small><span id="ccn-datetimepicker-datetime-minute">&nbsp;</span></div>
         </header>
         <div class="modal-card-body pickerContainer">
-            <div id="ccn-datetimepicker-panel-year">
+            <div id="ccn-datetimepicker-panelYear">
                 <nav class="level is-mobile">
                     <div class="level-left">
                         <div class="level-item control">
-                            <a class="button">
+                            <a id="ccn-datetimepiacker-panelYear-prevBtn" class="button">
                                 <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
                             </a>
                         </div>
                     </div>
-                    <div class="level-item">this is a title</div>
+                    <div id="ccn-datetimepiacker-panelYear-title" class="level-item"></div>
                     <div class="level-right">
                         <div class="level-item control">
-                            <a class="button">
+                            <a id="ccn-datetimepiacker-panelYear-nextBtn" class="button">
                                 <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
                             </a>
                         </div>
                     </div>
                 </nav>
 
-                <div class="perfectTable">
+                <div id="ccn-datetimepiacker-panelYear-table" class="perfectTable">
                     <div>
-                        <div>abc</div>
-                        <div>abc</div>
-                        <div>abc</div>
-                        <div>abc</div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
                     </div>
                     <div>
-                        <div>abc</div>
-                        <div>abc</div>
-                        <div>abc</div>
-                        <div>abc</div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
                     </div>
                     <div>
-                        <div>abc</div>
-                        <div>abc</div>
-                        <div>abc</div>
-                        <div>abc</div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
                     </div>
                 </div>
             </div>
-            <div id="ccn-datetimepicker-panel-month">
+            <div id="ccn-datetimepicker-panelMonth">
                 <nav class="level is-mobile">
                     <div class="level-left">
                         <div class="level-item control">
-                            <a class="button">
+                            <a id="ccn-datetimepiacker-panelMonth-prevBtn" class="button">
                                 <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
                             </a>
                         </div>
                     </div>
-                    <div class="level-item">this is a title</div>
+                    <div id="ccn-datetimepiacker-panelMonth-title" class="level-item"></div>
                     <div class="level-right">
                         <div class="level-item control">
-                            <a class="button">
+                            <a id="ccn-datetimepiacker-panelMonth-nextBtn" class="button">
                                 <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
                             </a>
                         </div>
                     </div>
                 </nav>
 
-                <div class="perfectTable">
+                <div id="ccn-datetimepiacker-panelMonth-table" class="perfectTable">
                     <div>
                         <div i18n-name="ccn-i18n-universal-month-1"></div>
                         <div i18n-name="ccn-i18n-universal-month-2"></div>
@@ -89,26 +89,26 @@
                     </div>
                 </div>
             </div>
-            <div id="ccn-datetimepicker-panel-day">
+            <div id="ccn-datetimepicker-panelDay">
                 <nav class="level is-mobile">
                     <div class="level-left">
                         <div class="level-item control">
-                            <a class="button">
+                            <a id="ccn-datetimepiacker-panelDay-prevBtn" class="button">
                                 <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
                             </a>
                         </div>
                     </div>
-                    <div class="level-item">this is a title</div>
+                    <div id="ccn-datetimepiacker-panelDay-title" class="level-item"></div>
                     <div class="level-right">
                         <div class="level-item control">
-                            <a class="button">
+                            <a id="ccn-datetimepiacker-panelDay-nextBtn" class="button">
                                 <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
                             </a>
                         </div>
                     </div>
                 </nav>
 
-                <div class="perfectTable">
+                <div id="ccn-datetimepiacker-panelDay-table" class="perfectTable">
                     <div>
                         <div i18n-name="ccn-i18n-universal-week-1"></div>
                         <div i18n-name="ccn-i18n-universal-week-2"></div>
@@ -138,7 +138,7 @@
                     </div>
                 </div>
             </div>
-            <svg id="ccn-datetimepicker-panel-hour" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
+            <svg id="ccn-datetimepicker-panelHour" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
                 <circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
                 <line x1="100" y1="100" x2="100.000000" y2="20.000000"></line>
                 <circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle>
@@ -168,7 +168,7 @@
                 <text x="48.038476" y="70.000000">22</text>
                 <text x="70.000000" y="48.038476">23</text>
             </svg>
-            <svg id="ccn-datetimepicker-panel-minute" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
+            <svg id="ccn-datetimepicker-panelMinute" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
                 <circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
                 <line x1="100" y1="100" x2="100.000000" y2="20.000000"></line>
                 <circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle>

src/static/tmpl/scheduleItem.tmpl

@@ -15,6 +15,9 @@
                     <p class="level-item"><b>{{>title}}</b></p>
                     <p class="level-item">{{>description}}</p>
                     <p class="level-item"><span>{{>start}}</span>-<span>{{>end}}</span></p>
+                    {{if loopText != ""}}
+                    <p><span class="icon is-small"><i class="fas fa-retweet"></i></span><span>{{>loopText}}</span></p>
+                    {{/if}}
                 </div>
                 <div class="schedule-event-icon">
                     {{if isLocked}}

src/static/tmpl/tokenItem.tmpl

@@ -22,6 +22,6 @@
     </div>
 
     <div id="ccn-tokenItem-btnLogout-{{:uuid}}" uuid="{{:uuid}}" class="token-item-icon control">
-        <a class="button"><span class="icon is-small"><i class="fas fa-sign-out"></i></span></a>
+        <a class="button"><span class="icon is-small"><i class="fas fa-sign-out-alt"></i></span></a>
     </div>
 </div>

src/templates/admin.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title id="ccn-pageName"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

src/templates/calendar.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title id="ccn-pageName"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
@@ -52,38 +52,36 @@
     </div>
 
     <div id="tabcontrol-panel-1-1" class="container tabcontrol-panel-1" style="margin-top: 20px;">
-        <nav class="level">
-            <div class="level-item control">
-                <a id="ccn-calendar-calendar-btnPrevMonth" class="button">
-                    <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
-                </a>
-            </div>
-
-            <div class="level-item">
-                <div class="field has-addons">
-                    <div class="control">
-                        <input datetimepicker="1" class="input datetimepicker-year" type="number">
-                    </div>
-                    <div class="control">
-                        <input datetimepicker="1" class="input datetimepicker-month" type="number">
-                    </div>
-                    <div class="control">
-                        <a id="ccn-calendar-calendar-btnJump" i18n-name="ccn-i18n-calendar-calendar-jump" class="button is-info"></a>
-                    </div>
+        <nav class="level is-mobile">
+            <div class="level-left">
+                <div class="level-item control">
+                    <a id="ccn-calendar-calendar-btnPrevMonth" class="button">
+                        <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
+                    </a>
                 </div>
             </div>
 
+            <div class="level-item control">
+                <a id="ccn-calendar-calendar-btnJump" class="button" datetimepicker="1">
+                    <span id="ccn-calendar-calendar-textMonth"></span>
+                </a>
+            </div>
+
+            <div class="level-right">
+                <div class="level-item control">
+                    <a id="ccn-calendar-calendar-btnNextMonth" class="button">
+                        <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
+                    </a>
+                </div>
+            </div>
+        </nav>
+        <nav class="level is-mobile">
             <div class="level-item control">
                 <a id="ccn-calendar-calendar-btnToday" i18n-name="ccn-i18n-calendar-calendar-today" class="button is-info"></a>
             </div>
             <div class="level-item control">
                 <a id="ccn-calendar-calendar-btnAdd" i18n-name="ccn-i18n-calendar-calendar-add" class="button is-primary"></a>
             </div>
-            <div class="level-item control">
-                <a id="ccn-calendar-calendar-btnNextMonth" class="button">
-                    <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
-                </a>
-            </div>
         </nav>
 
         <div id="ccn-calendar-calendarBody" class="card" style="padding: 1.25rem; display: flex; flex-flow: column;">

src/templates/collection.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title id="ccn-pageName"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

src/templates/event.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title id="ccn-pageName"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
@@ -73,38 +73,9 @@
         <section class="section">
 
             <h2 class="subtitle" i18n-name="ccn-i18n-event-startDateTime"></h2>
-            <div class="control-list">
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-year"></label>
-                    <div class="control">
-                        <input datetimepicker="1" class="input datetimepicker-year" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-month"></label>
-                    <div class="control">
-                        <input datetimepicker="1" class="input datetimepicker-month" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-day"></label>
-                    <div class="control">
-                        <input datetimepicker="1" class="input datetimepicker-day" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-hour"></label>
-                    <div class="control">
-                        <input datetimepicker="1" class="input datetimepicker-hour" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-minute"></label>
-                    <div class="control">
-                        <input datetimepicker="1" class="input datetimepicker-minute" type="number">
-                    </div>
-                </div>
-            </div>
+            <a id="ccn-event-btnStartDateTime" class="button" datetimepicker="1">
+                <span id="ccn-event-btnStartDateTime-text"></span>
+            </a>
 
             <h2 class="subtitle" i18n-name="ccn-i18n-event-endDateTime"></h2>
             <div class="control-list">
@@ -115,38 +86,9 @@
                     <a id="ccn-event-btnFullDay" class="button is-link" i18n-name="ccn-i18n-event-btnFullDay"></a>
                 </div>
             </div>
-            <div class="control-list">
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-year"></label>
-                    <div class="control">
-                        <input datetimepicker="2" class="input datetimepicker-year" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-month"></label>
-                    <div class="control">
-                        <input datetimepicker="2" class="input datetimepicker-month" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-day"></label>
-                    <div class="control">
-                        <input datetimepicker="2" class="input datetimepicker-day" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-hour"></label>
-                    <div class="control">
-                        <input datetimepicker="2" class="input datetimepicker-hour" type="number">
-                    </div>
-                </div>
-                <div class="field">
-                    <label class="label" i18n-name="ccn-i18n-universal-text-minute"></label>
-                    <div class="control">
-                        <input datetimepicker="2" class="input datetimepicker-minute" type="number">
-                    </div>
-                </div>
-            </div>
+            <a id="ccn-event-btnEndDateTime" class="button" datetimepicker="2">
+                <span id="ccn-event-btnEndDateTime-text"></span>
+            </a>
 
         </section>
 
@@ -279,28 +221,9 @@
                 </label>
             </div>
             <div id="ccn-event-boxLoopStopDateTime">
-                <div class="field">
-                    <div class="control-list">
-                        <div class="field">
-                            <label class="label" i18n-name="ccn-i18n-universal-text-year"></label>
-                            <div class="control">
-                                <input datetimepicker="3" class="input datetimepicker-year" type="number">
-                            </div>
-                        </div>
-                        <div class="field">
-                            <label class="label" i18n-name="ccn-i18n-universal-text-month"></label>
-                            <div class="control">
-                                <input datetimepicker="3" class="input datetimepicker-month" type="number">
-                            </div>
-                        </div>
-                        <div class="field">
-                            <label class="label" i18n-name="ccn-i18n-universal-text-day"></label>
-                            <div class="control">
-                                <input datetimepicker="3" class="input datetimepicker-day" type="number">
-                            </div>
-                        </div>
-                    </div>
-                </div>                    
+                <a id="ccn-event-btnLoopStopDateTime" class="button" datetimepicker="3">
+                    <span id="ccn-event-btnLoopStopDateTime-text"></span>
+                </a>                 
             </div>
             <div id="ccn-event-boxLoopStopTimes">
                 <div class="field">

src/templates/home.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title id="ccn-pageName"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

src/templates/login.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title id="ccn-pageName"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

src/templates/todo.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title id="ccn-pageName"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>