| Lines 5-11
          
      
      
        Link Here | 
        
          | 5 | [% INCLUDE 'doc-head-open.inc' %] | 5 | [% INCLUDE 'doc-head-open.inc' %] | 
        
          | 6 | <title>[% Branches.GetName( branch ) | html %] calendar; Tools › Koha &rsaquo</title> | 6 | <title>[% Branches.GetName( branch ) | html %] calendar; Tools › Koha &rsaquo</title> | 
        
          | 7 | [% INCLUDE 'doc-head-close.inc' %] | 7 | [% INCLUDE 'doc-head-close.inc' %] | 
          
            
              | 8 | [% Asset.css("css/discretecalendar.css") | $raw %] | 8 | [% Asset.css("css/calendar.css") | $raw %] | 
        
          | 9 | </head> | 9 | </head> | 
        
          | 10 |  | 10 |  | 
        
          | 11 | <body id="tools_holidays" class="tools"> | 11 | <body id="tools_holidays" class="tools"> | 
  
    | Lines 80-86
          
      
      
        Link Here | 
        
          | 80 |  | 80 |  | 
        
          | 81 |                         <h3>Calendar information</h3> | 81 |                         <h3>Calendar information</h3> | 
        
          | 82 |  | 82 |  | 
          
            
              | 83 |                         <div id="jcalendar-container"></div> | 83 |                         <span id="calendar-anchor"></span> | 
        
          | 84 |  | 84 |  | 
        
          | 85 |                         <!-- ***************************** Panel to deal with new holidays ********************** --> | 85 |                         <!-- ***************************** Panel to deal with new holidays ********************** --> | 
        
          | 86 |                         <div class="panel newHoliday" id="newHoliday"> | 86 |                         <div class="panel newHoliday" id="newHoliday"> | 
  
    | Lines 110-116
          
      
      
        Link Here | 
        
          | 110 |                                         </li> | 110 |                                         </li> | 
        
          | 111 |                                         <li class="dateinsert"> | 111 |                                         <li class="dateinsert"> | 
        
          | 112 |                                             <strong>To date:</strong> | 112 |                                             <strong>To date:</strong> | 
          
            
              | 113 |                                             <input type="text" id="to_date_datepicker" size="20" class="datepicker" /> | 113 |                                             <input type="text" id="to_date_flatpickr" size="20" /> | 
        
          | 114 |                                         </li> | 114 |                                         </li> | 
        
          | 115 |                                         <li> | 115 |                                         <li> | 
        
          | 116 |                                             <label for="title">Title: </label> | 116 |                                             <label for="title">Title: </label> | 
  
    | Lines 162-170
          
      
      
        Link Here | 
        
          | 162 |                                         </li> | 162 |                                         </li> | 
        
          | 163 |                                         <li class="CopyDatePanel"> | 163 |                                         <li class="CopyDatePanel"> | 
        
          | 164 |                                             <label>From:</label> | 164 |                                             <label>From:</label> | 
          
            
              | 165 |                                             <input type="text" id="copyto_from_datepicker" size="20" class="datepicker"/> | 165 |                                             <input type="text" id="copyto_from_flatpickr" size="20"/> | 
        
          | 166 |                                             <label>To:</label> | 166 |                                             <label>To:</label> | 
          
            
              | 167 |                                             <input type="text" id="copyto_to_datepicker" size="20" class="datepicker"/> | 167 |                                             <input type="text" id="copyto_to_flatpickr" size="20"/> | 
        
          | 168 |                                         </li> | 168 |                                         </li> | 
        
          | 169 |                                     </ol> | 169 |                                     </ol> | 
        
          | 170 |  | 170 |  | 
  
    | Lines 214-224
          
      
      
        Link Here | 
        
          | 214 |                         <div id="holiday-list"> | 214 |                         <div id="holiday-list"> | 
        
          | 215 |                             [% IF ( NEED_VALIDATION_HOLIDAYS ) %] | 215 |                             [% IF ( NEED_VALIDATION_HOLIDAYS ) %] | 
        
          | 216 |                             <h3>Need validation holidays</h3> | 216 |                             <h3>Need validation holidays</h3> | 
          
            
              | 217 |                             <table id="holidaysunique"> | 217 |                             <table id="holidaysvalidation"> | 
        
          | 218 |                                 <thead> | 218 |                                 <thead> | 
        
          | 219 |                                     <tr> | 219 |                                     <tr> | 
          
            
              | 220 |                                         <th class="exception">Date</th> | 220 |                                         <th class="validation">Date</th> | 
            
              | 221 |                                         <th class="exception">Title</th> | 221 |                                         <th class="validation">Title</th> | 
        
          | 222 |                                     </tr> | 222 |                                     </tr> | 
        
          | 223 |                                 </thead> | 223 |                                 </thead> | 
        
          | 224 |                                 <tbody> | 224 |                                 <tbody> | 
  
    | Lines 302-308
          
      
      
        Link Here | 
        
          | 302 |  | 302 |  | 
        
          | 303 |                             [% IF ( FLOAT_HOLIDAYS ) %] | 303 |                             [% IF ( FLOAT_HOLIDAYS ) %] | 
        
          | 304 |                             <h3>Floating holidays</h3> | 304 |                             <h3>Floating holidays</h3> | 
          
            
              | 305 |                             <table id="holidaysunique"> | 305 |                             <table id="holidaysfloat"> | 
        
          | 306 |                                 <thead> | 306 |                                 <thead> | 
        
          | 307 |                                     <tr> | 307 |                                     <tr> | 
        
          | 308 |                                         <th class="float">Date</th> | 308 |                                         <th class="float">Date</th> | 
  
    | Lines 336-342
          
      
      
        Link Here | 
        
          | 336 | [% MACRO jsinclude BLOCK %] | 336 | [% MACRO jsinclude BLOCK %] | 
        
          | 337 |     [% INCLUDE 'calendar.inc' %] | 337 |     [% INCLUDE 'calendar.inc' %] | 
        
          | 338 |     [% INCLUDE 'datatables.inc' %] | 338 |     [% INCLUDE 'datatables.inc' %] | 
            
              | 339 |     [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %] |  |  | 
        
          | 340 |     [% Asset.js("js/tools-menu.js") | $raw %] | 339 |     [% Asset.js("js/tools-menu.js") | $raw %] | 
        
          | 341 |     <script> | 340 |     <script> | 
        
          | 342 |         var weekdays = new Array(_("Sundays"),_("Mondays"),_("Tuesdays"),_("Wednesdays"),_("Thursdays"),_("Fridays"),_("Saturdays")); | 341 |         var weekdays = new Array(_("Sundays"),_("Mondays"),_("Tuesdays"),_("Wednesdays"),_("Thursdays"),_("Fridays"),_("Saturdays")); | 
  
    | Lines 426-456
          
      
      
        Link Here | 
        
          | 426 |         } | 425 |         } | 
        
          | 427 |  | 426 |  | 
        
          | 428 |         // This function gives css classes to each kind of day | 427 |         // This function gives css classes to each kind of day | 
          
            
              | 429 |         function dateStatusHandler(date) { | 428 |         function dateStatusHandler(dayElem) { | 
            
              | 430 |             date = getSeparetedDate(date); | 429 |             date = getSeparetedDate(dayElem.dateObj); | 
        
          | 431 |             var dateString = date.dateString; | 430 |             var dateString = date.dateString; | 
        
          | 432 |             var today = new Date(); | 431 |             var today = new Date(); | 
        
          | 433 |             today.setHours(0, 0, 0, 0); | 432 |             today.setHours(0, 0, 0, 0); | 
        
          | 434 |  | 433 |  | 
        
          | 435 |             if (datesInfos[dateString] && datesInfos[dateString].holiday_type =='W') { | 434 |             if (datesInfos[dateString] && datesInfos[dateString].holiday_type =='W') { | 
          
            
              | 436 |                 return [true, "repeatableweekly", _("Weekly holiday: %s").format(datesInfos[dateString].title)]; | 435 |                 formatDay( [ "repeatableweekly", _("Weekly holiday: %s").format(datesInfos[dateString].title)], dayElem ); | 
        
          | 437 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'R') { | 436 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'R') { | 
          
            
              | 438 |                 return [true, "repeatableyearly", _("Yearly holiday: %s").format(datesInfos[dateString].title)]; | 437 |                 formatDay( [ "repeatableyearly", _("Yearly holiday: %s").format(datesInfos[dateString].title)], dayElem ); | 
        
          | 439 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'N') { | 438 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'N') { | 
          
            
              | 440 |                 return [true, "exception", _("Need validation: %s").format(datesInfos[dateString].title)]; | 439 |                 formatDay( [ "exception", _("Need validation: %s").format(datesInfos[dateString].title)], dayElem ); | 
        
          | 441 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'F') { | 440 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'F') { | 
          
            
              | 442 |                 return [true, "float", _("Floating holiday: %s").format(datesInfos[dateString].title)]; | 441 |                 formatDay( [ "float", _("Floating holiday: %s").format(datesInfos[dateString].title)], dayElem ); | 
        
          | 443 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'E') { | 442 |             } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'E') { | 
          
            
              | 444 |                 return [true, "holiday", _("Single holiday: %s").format(datesInfos[dateString].title)]; | 443 |                 formatDay( [ "holiday", _("Single holiday: %s").format(datesInfos[dateString].title)], dayElem ); | 
        
          | 445 |             } else { | 444 |             } else { | 
        
          | 446 |                 if (date.date_obj < today) { | 445 |                 if (date.date_obj < today) { | 
          
            
              | 447 |                     return [true, "past-date", _("Past day")]; | 446 |                     formatDay( [ "past-date", _("Past day")], dayElem ); | 
        
          | 448 |                 }else { | 447 |                 }else { | 
          
            
              | 449 |                     return [true, "normalday", _("Normal day")]; | 448 |                     formatDay( [ "normalday", _("Normal day")], dayElem ); | 
        
          | 450 |                 } | 449 |                 } | 
        
          | 451 |             } | 450 |             } | 
        
          | 452 |         } | 451 |         } | 
        
          | 453 |  | 452 |  | 
            
              |  |  | 453 |         function formatDay( settings, dayElem ){ | 
            
              | 454 |             $(dayElem).attr("title", settings[1]).addClass( settings[0]); | 
            
              | 455 |         } | 
            
              | 456 |  | 
        
          | 454 |         /* | 457 |         /* | 
        
          | 455 |          * This function separate a given date object and returns an array containing all needed information about the date. | 458 |          * This function separate a given date object and returns an array containing all needed information about the date. | 
        
          | 456 |          */ | 459 |          */ | 
  
    | Lines 479-492
          
      
      
        Link Here | 
        
          | 479 |          */ | 482 |          */ | 
        
          | 480 |         function validateForm(form) { | 483 |         function validateForm(form) { | 
        
          | 481 |             if (form =='newHoliday-form' && $('#CopyRadioButton').is(':checked')) { | 484 |             if (form =='newHoliday-form' && $('#CopyRadioButton').is(':checked')) { | 
          
            
              | 482 |                 if ($('#copyto_from_datepicker').val() =='' || $('#copyto_to_datepicker').val() =='') { | 485 |                 if ($('#copyto_from_flatpickr').val() =='' || $('#copyto_to_flatpickr').val() =='') { | 
        
          | 483 |                     alert("You have to pick a FROM and TO in the Copy to different dates."); | 486 |                     alert("You have to pick a FROM and TO in the Copy to different dates."); | 
        
          | 484 |                     return false; | 487 |                     return false; | 
          
            
              | 485 |                 } else if ($('#to_date_datepicker').val()) { | 488 |                 } else if ($('#to_date_flatpickr').val()) { | 
            
              | 486 |                     var from_DateFrom = new Date($("#jcalendar-container").datepicker("getDate")); | 489 |                     var from_DateFrom = new Date(document.querySelector("#calendar-anchor")._flatpickr.selectedDates[0]); | 
            
              | 487 |                     var from_DateTo = new Date($('#to_date_datepicker').datepicker("getDate")); | 490 |                     var from_DateTo = new Date(document.querySelector('#to_date_flatpickr')._flatpickr.selectedDates[0]); | 
            
              | 488 |                     var to_DateFrom = new Date($('#copyto_from_datepicker').datepicker("getDate")); | 491 |                     var to_DateFrom = new Date(document.querySelector('#copyto_from_flatpickr')._flatpickr.selectedDates[0]); | 
            
              | 489 |                     var to_DateTo = new Date($('#copyto_to_datepicker').datepicker("getDate")); | 492 |                     var to_DateTo = new Date(document.querySelector('#copyto_to_flatpickr')._flatpickr.selectedDates[0]); | 
        
          | 490 |  | 493 |  | 
        
          | 491 |                     var from_start = Math.round( from_DateFrom.getTime() / (3600*24*1000)); // days as integer from.. | 494 |                     var from_start = Math.round( from_DateFrom.getTime() / (3600*24*1000)); // days as integer from.. | 
        
          | 492 |                     var from_end   = Math.round( from_DateTo.getTime() / (3600*24*1000)); | 495 |                     var from_end   = Math.round( from_DateTo.getTime() / (3600*24*1000)); | 
  
    | Lines 526-532
          
      
      
        Link Here | 
        
          | 526 |             var dateString = date.dateString; | 529 |             var dateString = date.dateString; | 
        
          | 527 |             var date_obj = date.date_obj; | 530 |             var date_obj = date.date_obj; | 
        
          | 528 |  | 531 |  | 
          
            
              | 529 |             $("#jcalendar-container").datepicker("setDate", date_obj); | 532 |             document.querySelector("#calendar-anchor")._flatpickr.setDate(date_obj); | 
        
          | 530 |             showHoliday(date_obj, dateString, dayName, day, month, year, weekDay, datesInfos[dateString].title, datesInfos[dateString].holiday_type); | 533 |             showHoliday(date_obj, dateString, dayName, day, month, year, weekDay, datesInfos[dateString].title, datesInfos[dateString].holiday_type); | 
        
          | 531 |         } | 534 |         } | 
        
          | 532 |  | 535 |  | 
  
    | Lines 536-542
          
      
      
        Link Here | 
        
          | 536 |         function checkRange(date) { | 539 |         function checkRange(date) { | 
        
          | 537 |             date = new Date(date); | 540 |             date = new Date(date); | 
        
          | 538 |             $('#to_date').val(getSeparetedDate(date).dateString); | 541 |             $('#to_date').val(getSeparetedDate(date).dateString); | 
          
            
              | 539 |             var fromDate = new Date($("#jcalendar-container").datepicker("getDate")); | 542 |             var fromDate = new Date(document.querySelector("#calendar-anchor")._flatpickr.selectedDates[0]); | 
        
          | 540 |             var sameHoliday =true; | 543 |             var sameHoliday =true; | 
        
          | 541 |             var sameOpenHours =true; | 544 |             var sameOpenHours =true; | 
        
          | 542 |             var sameCloseHours =true; | 545 |             var sameCloseHours =true; | 
  
    | Lines 600-674
          
      
      
        Link Here | 
        
          | 600 |                 return validateForm($(this).attr("id")); | 603 |                 return validateForm($(this).attr("id")); | 
        
          | 601 |             }); | 604 |             }); | 
        
          | 602 |  | 605 |  | 
          
            
              | 603 |             // Set the correct coloring, default date and the date ranges for all datepickers | 606 |             flatpickr.setDefaults({ | 
            
              | 604 |             [%    IF (dateformat == 'metric') %][% datepickerformat = 'dd/mm/yy' %] | 607 |                 onDayCreate: function( dObj, dStr, fp, dayElem ){ | 
            
              | 605 |             [% ELSIF (dateformat == 'us'    ) %][% datepickerformat = 'mm/dd/yy' %] | 608 |                     /* for each day on the calendar, get the | 
            
              | 606 |             [% ELSIF (dateformat == 'iso'   ) %][% datepickerformat = 'yy-mm-dd' %] | 609 |                       correct status information for the date */ | 
            
              | 607 |             [% ELSIF (dateformat == 'dmydot') %][% datepickerformat = 'dd.mm.yy' %] | 610 |                     dateStatusHandler( dayElem ); | 
            
              | 608 |             [% END %] |  |  | 
            
              | 609 |  | 
            
              | 610 |             $.datepicker.setDefaults({ | 
            
              | 611 |                 beforeShowDay: function(thedate) { | 
            
              | 612 |                     return dateStatusHandler(thedate); | 
        
          | 613 |                 }, | 611 |                 }, | 
            
              | 614 |                 defaultDate: new Date("[% keydate | html %]"), |  |  | 
        
          | 615 |                 minDate: new Date("[% minDate | html %]"), | 612 |                 minDate: new Date("[% minDate | html %]"), | 
          
            
              | 616 |                 maxDate: new Date("[% maxDate | html %]"), | 613 |                 maxDate: new Date("[% maxDate | html %]") | 
            
              | 617 |                 dateFormat: "[% datepickerformat | html %]" |  |  | 
        
          | 618 |             }); | 614 |             }); | 
        
          | 619 |  | 615 |  | 
          
            
              | 620 |             // Main datepicker | 616 |             // Main flatpickr | 
            
              | 621 |             $("#jcalendar-container").datepicker({ | 617 |             $("#calendar-anchor").flatpickr({ | 
            
              | 622 |                 onSelect: function(dateText, inst) { | 618 |                 inline: true, | 
            
              |  |  | 619 |                 onReady: function( selectedDates, dateStr, instance ){ | 
            
              | 620 |                     // We do not want to display the 'close' icon in this case | 
            
              | 621 |                     $(instance.input).siblings('.flatpickr-input').hide(); | 
            
              | 622 |                 }, | 
            
              | 623 |                 onChange: function(selectedDates, dateStr, instance) { | 
        
          | 623 |                     [% IF datesInfos %] | 624 |                     [% IF datesInfos %] | 
          
            
              | 624 |                         var date = getSeparetedDate($(this).datepicker("getDate")); | 625 |                         var date = getSeparetedDate(selectedDates[0]); | 
        
          | 625 |                         var weekDay = date.weekDay; | 626 |                         var weekDay = date.weekDay; | 
        
          | 626 |                         var dayName = weekdays[weekDay]; | 627 |                         var dayName = weekdays[weekDay]; | 
        
          | 627 |                         var dateString = date.dateString; | 628 |                         var dateString = date.dateString; | 
        
          | 628 |  | 629 |  | 
        
          | 629 |                         // set value of form hidden field | 630 |                         // set value of form hidden field | 
          
            
              | 630 |                         $('#from_date').val(dateText); | 631 |                         $('#from_date').val(dateStr); | 
            
              | 631 |  |  |  | 
        
          | 632 |                         showHoliday(date.date_obj, dateString, dayName, date.day, date.month, date.year, weekDay, datesInfos[dateString].title, datesInfos[dateString].holiday_type); | 632 |                         showHoliday(date.date_obj, dateString, dayName, date.day, date.month, date.year, weekDay, datesInfos[dateString].title, datesInfos[dateString].holiday_type); | 
        
          | 633 |                     [% END %] | 633 |                     [% END %] | 
          
            
              | 634 |                 }, | 634 |                 } | 
        
          | 635 |             }); | 635 |             }); | 
        
          | 636 |  | 636 |  | 
          
            
              | 637 |             $('#to_date_datepicker').datepicker(); | 637 |             $('#to_date_flatpickr').flatpickr(); | 
            
              | 638 |             $("#to_date_datepicker").change(function() { | 638 |             $("#to_date_flatpickr").change(function() { | 
            
              | 639 |                 checkRange($(this).datepicker("getDate")); | 639 |                 checkRange(document.querySelector("#to_date_flatpickr")._flatpickr.selectedDates[0]); | 
            
              | 640 |                 $('#to_date').val(($(this).val())); | 640 |                 $('#to_date').val(($("#to_date_flatpickr").val())); | 
            
              | 641 |                 if ($('#to_date_datepicker').val()) { | 641 |                 if ($('#to_date_flatpickr').val()) { | 
        
          | 642 |                     $('#days_of_week').show("fast"); | 642 |                     $('#days_of_week').show("fast"); | 
        
          | 643 |                 } else { | 643 |                 } else { | 
        
          | 644 |                     $('#days_of_week').hide("fast"); | 644 |                     $('#days_of_week').hide("fast"); | 
        
          | 645 |                 } | 645 |                 } | 
        
          | 646 |             }); | 646 |             }); | 
        
          | 647 |  | 647 |  | 
          
            
              | 648 |             // Datepickers for copy dates feature | 648 |             // Flatpickrs for copy dates feature | 
            
              | 649 |             $('#copyto_from_datepicker').datepicker(); | 649 |             $('#copyto_from_flatpickr').flatpickr(); | 
            
              | 650 |             $("#copyto_from_datepicker").change(function() { | 650 |             $("#copyto_from_flatpickr").change(function() { | 
        
          | 651 |                 $('#copyto_from').val(($(this).val())); | 651 |                 $('#copyto_from').val(($(this).val())); | 
        
          | 652 |             }); | 652 |             }); | 
        
          | 653 |  | 653 |  | 
          
            
              | 654 |             $('#copyto_to_datepicker').datepicker(); | 654 |             $('#copyto_to_flatpickr').flatpickr(); | 
            
              | 655 |             $("#copyto_to_datepicker").change(function() { | 655 |             $("#copyto_to_flatpickr").change(function() { | 
        
          | 656 |                 $('#copyto_to').val(($(this).val())); | 656 |                 $('#copyto_to').val(($(this).val())); | 
        
          | 657 |             }); | 657 |             }); | 
        
          | 658 |  | 658 |  | 
          
            
              | 659 |             // Timepickers for open and close hours | 659 |             // Flatpickrs for open and close hours | 
            
              | 660 |             $('#openHour').timepicker({ | 660 |             timeoptions = { | 
            
              | 661 |                 showOn : 'focus', | 661 |                 plugins: [], | 
            
              | 662 |                 timeFormat: 'HH:mm:ss', | 662 |                 enableTime: true, | 
            
              | 663 |                 showSecond: false, | 663 |                 noCalendar: true, | 
            
              | 664 |                 stepMinute: 5, | 664 |                 dateFormat: "H:i:S", | 
            
              | 665 |             }); | 665 |                 altInput: false, | 
            
              | 666 |             $('#closeHour').timepicker({ | 666 |                 defaultHour: 12, | 
            
              | 667 |                 showOn : 'focus', | 667 |                 defaultMinute: 0, | 
            
              | 668 |                 timeFormat: 'HH:mm:ss', | 668 |                 onOpen: function( selectedDates, dateStr, instance ) { | 
            
              | 669 |                 showSecond: false, | 669 |                     instance.setDate(instance.input.value, false); | 
            
              | 670 |                 stepMinute: 5, | 670 |                 } | 
            
              | 671 |             }); | 671 |             } | 
            
              |  |  | 672 |             $('#openHour').flatpickr(timeoptions); | 
            
              | 673 |             $('#closeHour').flatpickr(timeoptions); | 
        
          | 672 |  | 674 |  | 
        
          | 673 |             $('.newHoliday input[type="radio"]').click(function() { | 675 |             $('.newHoliday input[type="radio"]').click(function() { | 
        
          | 674 |                 if ($(this).attr("id") == "CopyRadioButton") { | 676 |                 if ($(this).attr("id") == "CopyRadioButton") { | 
  
    | Lines 696-702
          
      
      
        Link Here | 
        
          | 696 |             $("#holidayType select").on("change", function() { | 698 |             $("#holidayType select").on("change", function() { | 
        
          | 697 |                 if ($("#holidayType select").val() == "R") { | 699 |                 if ($("#holidayType select").val() == "R") { | 
        
          | 698 |                     $('#days_of_week').hide("fast"); | 700 |                     $('#days_of_week').hide("fast"); | 
          
            
              | 699 |                 } else if ($('#to_date_datepicker').val()) { | 701 |                 } else if ($('#to_date_flatpickr').val()) { | 
        
          | 700 |                     $('#days_of_week').show("fast"); | 702 |                     $('#days_of_week').show("fast"); | 
        
          | 701 |                 } | 703 |                 } | 
        
          | 702 |             }); | 704 |             }); | 
            
              | 703 | -  |  |  |