fix various bugs

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 {
@@ -95,7 +98,7 @@ header.pickerHeader {
     display: flex;
     flex-flow: row;
 
-    flex-grow: 1;
+    flex-grow: 0;
     flex-basis: 0;
     flex-shrink: 0;
 

src/static/js/datetime.js

@@ -3,8 +3,8 @@ 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 = 2200;
-var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(ccn_datetime_MIN_YEAR, 1, 1, 0, 0, 0, 0));
+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, 1, 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);
 

src/static/js/datetimepicker.js

@@ -116,6 +116,7 @@ function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC) {
 }
 
 function ccn_datetimepicker_Confirm() {
+    // update and call callback func
     ccn_datetimepicker_Set(
         ccn_datetimepicker_pickerIndex, 
         ccn_datetimepicker_internalDateTime, 
@@ -211,7 +212,7 @@ function ccn_datetimepicker_RefreshDisplay(tab) {
             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(year)) ? 1 : 0);
+            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));
@@ -356,9 +357,17 @@ function ccn_datetimepicker_ClickDay() {
 
 function ccn_datetimepicker_StartDragHour() { ccn_datetimepicker_enableHourDrag = true; }
 function ccn_datetimepicker_DraggingHour(e) {
-    var offset = $('#ccn-datetimepicker-panelHour').offset();
+    if (!ccn_datetimepicker_enableHourDrag) return;
-    var x = e.pageX - offset.left - ccn_datetimepicker_dialPlateRadius;
+
-    var y = -(e.pageY - offset.top - ccn_datetimepicker_dialPlateRadius);
+    var ele = $('#ccn-datetimepicker-panelHour')
+    var offset = {
+        left: ele.offset().left,
+        top: ele.offset().top,
+        width: ele.width(),
+        height: ele.height()
+    }
+    var x = (e.pageX - offset.left) / width * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius;
+    var y = -((e.pageY - offset.top) / height * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius);
 
     var distance = Math.sqrt(x * x + y * y);
     var angle = Math.asin(y / distance);
@@ -392,9 +401,17 @@ function ccn_datetimepicker_StopDragHour() {
 
 function ccn_datetimepicker_StartDragMinute() { ccn_datetimepicker_enableMinuteDrag = true; }
 function ccn_datetimepicker_DraggingMinute(e) {
-    var offset = $('#ccn-datetimepicker-panelMinute').offset();
+    if (!ccn_datetimepicker_enableMinuteDrag) return;
-    var x = e.pageX - offset.left - ccn_datetimepicker_dialPlateRadius;
+
-    var y = -(e.pageY - offset.top - ccn_datetimepicker_dialPlateRadius);
+    var ele = $('#ccn-datetimepicker-panelMinute')
+    var offset = {
+        left: ele.offset().left,
+        top: ele.offset().top,
+        width: ele.width(),
+        height: ele.height()
+    }
+    var x = (e.pageX - offset.left) / offset.width * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius;
+    var y = -((e.pageY - offset.top) / offset.height * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius);
 
     var distance = Math.sqrt(x * x + y * y);
     var angle = Math.asin(y / distance);
@@ -434,19 +451,23 @@ function ccn_datetimepicker_ClampDateTime(dateObj) {
 
 function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) {
     var ele = $('[datetimepicker=' + pickerIndex + ']');
-    if (mode < ccn_datetimepicker_tabType.year) return;
+    while(true) {
-    ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear());
+        if (mode < ccn_datetimepicker_tabType.year) break;
-    if (mode < ccn_datetimepicker_tabType.month) return;
+        ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear());
-    ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1);
+        if (mode < ccn_datetimepicker_tabType.month) break;
-    if (mode < ccn_datetimepicker_tabType.day) return;
+        ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1);
-    ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate());
+        if (mode < ccn_datetimepicker_tabType.day) break;
-    if (mode < ccn_datetimepicker_tabType.hour) return;
+        ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate());
-    ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours());
+        if (mode < ccn_datetimepicker_tabType.hour) break;
-    if (mode < ccn_datetimepicker_tabType.minute) return;
+        ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours());
-    ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes());
+        if (mode < ccn_datetimepicker_tabType.minute) break;
+        ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes());
 
-    if (typeof(ele.prop('callbackFunc')) == 'function')
+        break;
-        ele.prop('callbackFunc')();
+    }
+
+    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/page/calendar.js

@@ -61,9 +61,12 @@ $(document).ready(function() {
     $('#ccn-calendar-collection-btnRefresh').click(ccn_calendar_collection_Refresh);
 
     $('#ccn-calendar-calendar-btnJump')
-    .prop('callbackFunc', ccn_calendar_calendar_btnRefresh)
+    .prop('funcs', {callback: ccn_calendar_calendar_btnRefresh})
     .click(function() {
-        ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.month, 1, false);
+        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);

src/static/js/page/event.js

@@ -37,6 +37,15 @@ $(document).ready(function() {
     $('#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);}})
+    .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();
@@ -60,9 +69,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 != "")
@@ -242,6 +248,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]
@@ -365,6 +391,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/templates/calendar.html

@@ -55,14 +55,14 @@
         <nav class="level is-mobile">
             <div class="level-left">
                 <div class="level-item control">
-                    <a id="ccn-calendar-calendar-btnPrevMonth" class="button" datetimepicker="1">
+                    <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">
+                <a id="ccn-calendar-calendar-btnJump" class="button" datetimepicker="1">
                     <span id="ccn-calendar-calendar-textMonth"></span>
                 </a>
             </div>
@@ -75,7 +75,7 @@
                 </div>
             </div>
         </nav>
-        <nav class="level">
+        <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>

src/templates/event.html

@@ -73,38 +73,9 @@
         <section class="section">
 
             <h2 class="subtitle" i18n-name="ccn-i18n-event-startDateTime"></h2>
-            <div class="control-list">
+            <a id="ccn-event-btnStartDateTime" class="button" datetimepicker="1">
-                <div class="field">
+                <span id="ccn-event-btnStartDateTime-text"></span>
-                    <label class="label" i18n-name="ccn-i18n-universal-text-year"></label>
+            </a>
-                    <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>
 
             <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">
+            <a id="ccn-event-btnEndDateTime" class="button" datetimepicker="2">
-                <div class="field">
+                <span id="ccn-event-btnEndDateTime-text"></span>
-                    <label class="label" i18n-name="ccn-i18n-universal-text-year"></label>
+            </a>
-                    <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>
 
         </section>
 
@@ -279,28 +221,9 @@
                 </label>
             </div>
             <div id="ccn-event-boxLoopStopDateTime">
-                <div class="field">
+                <a id="ccn-event-btnLoopStopDateTime" class="button" datetimepicker="3">
-                    <div class="control-list">
+                    <span id="ccn-event-btnLoopStopDateTime-text"></span>
-                        <div class="field">
+                </a>                 
-                            <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>                    
             </div>
             <div id="ccn-event-boxLoopStopTimes">
                 <div class="field">