My Recurring Dates Plugin
Recurring dates with the option of weekends on and off. Recurrence is for days, months, week etc.
by Superman
HTML
<script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<div id="optionsForm" class="showInGrid">Recurrence every
<input size="5" id="recur" type="number" min="1" value="7" />
<select id="occurrence">
<option value="Date" selected="selected">Days</option>
<option value="Week">Weeks</option>
<option value="Month">Months</option>
</select>
<button id="calc">Show recurrence</button>
<input type="checkbox" id="weekends"> allow weekends
<br>
<br>
<input id="from" class="inputDates" placeholder="start date" />
<input id="to" class="inputDates" placeholder="end date" />
<br>
</div>
<div id="myCalendar"></div>
CSS
/* begin: jQuery UI Datepicker moving pixels fix */
table.ui-datepicker-calendar {
border-collapse: separate;
}
.ui-datepicker-calendar td {
border: 1px solid transparent;
}
/* end: jQuery UI Datepicker moving pixels fix */
/* begin: jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
background: #743620 none;
/* a color that fits the widget theme */
color: white;
/* a color that is readeable with the color above */
}
div.ui-datepicker {
font-size:9px;
}
[type=number] {
width: 3em;
}
JavaScript
(function () {
$("#from").datepicker({
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
$('#calc').on('click', showRecurrence);
// handler for button
function showRecurrence(e) {
var start = $("#from").datepicker("getDate");
var end = $("#to").datepicker("getDate");
var nOcc = +$('#recur').val();
var occType = $('#occurrence').val() || 'Date';
var allowWeekends = !$('#weekends').is(':checked');
var yearspanned = 1 + end.getFullYear() - start.getFullYear();
if (occType == 'Week') {
occType = 'Date';
nOcc = nOcc * 7;
}
// no date or recurrence value: do nothing
if (nOcc < 1 || !start || !end) { return true; }
// calculate recurrence
var selectedDates = recurringDates(start, end, nOcc, occType, allowWeekends );
$("#myCalendar").multiDatesPicker({
numberOfMonths: [(yearspanned || 1)*12, 1]
});
// add calculated dates
setTimeout(
function () {
$("#myCalendar").multiDatesPicker("addDates", selectedDates);
}, 0);
$("#myCalendar").multiDatesPicker("resetDates");
}
function recurringDates(startDate, endDate, interval, intervalType, noweekends) {
intervalType = intervalType || 'Date';
var date = startDate;
var recurrent = [];
var setget = {
set: 'set' + intervalType,
get: 'get' + intervalType
};
while (date < endDate) {
recurrent.push(noweekends ? noWeekend() : new Date(date));
date[setget.set](date[setget.get]() + interval);
}
// add 1 day for sunday, subtract one for saturday
...