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 |
- |
|
|