You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.5 KiB
90 lines
2.5 KiB
9 years ago
|
// call this from the developer console and you can control both instances
|
||
|
|
var calendars = {};
|
||
|
|
|
||
|
|
$(document).ready( function() {
|
||
|
|
|
||
|
|
// assuming you've got the appropriate language files,
|
||
|
|
// clndr will respect whatever moment's language is set to.
|
||
|
|
// moment.lang('ru');
|
||
|
|
|
||
|
|
// here's some magic to make sure the dates are happening this month.
|
||
|
|
var thisMonth = moment().format('YYYY-MM');
|
||
|
|
|
||
|
|
var eventArray = [
|
||
|
|
{ startDate: thisMonth + '-10', endDate: thisMonth + '-14', title: 'Multi-Day Event' },
|
||
|
|
{ startDate: thisMonth + '-21', endDate: thisMonth + '-23', title: 'Another Multi-Day Event' }
|
||
|
|
];
|
||
|
|
|
||
|
|
// the order of the click handlers is predictable.
|
||
|
|
// direct click action callbacks come first: click, nextMonth, previousMonth, nextYear, previousYear, or today.
|
||
|
|
// then onMonthChange (if the month changed).
|
||
|
|
// finally onYearChange (if the year changed).
|
||
|
|
|
||
|
|
calendars.clndr1 = $('.cal1').clndr({
|
||
|
|
events: eventArray,
|
||
|
|
// constraints: {
|
||
|
|
// startDate: '2013-11-01',
|
||
|
|
// endDate: '2013-11-15'
|
||
|
|
// },
|
||
|
|
clickEvents: {
|
||
|
|
click: function(target) {
|
||
|
|
console.log(target);
|
||
|
|
if($(target.element).hasClass('inactive')) {
|
||
|
|
console.log('not a valid datepicker date.');
|
||
|
|
} else {
|
||
|
|
console.log('VALID datepicker date.');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
nextMonth: function() {
|
||
|
|
console.log('next month.');
|
||
|
|
},
|
||
|
|
previousMonth: function() {
|
||
|
|
console.log('previous month.');
|
||
|
|
},
|
||
|
|
onMonthChange: function() {
|
||
|
|
console.log('month changed.');
|
||
|
|
},
|
||
|
|
nextYear: function() {
|
||
|
|
console.log('next year.');
|
||
|
|
},
|
||
|
|
previousYear: function() {
|
||
|
|
console.log('previous year.');
|
||
|
|
},
|
||
|
|
onYearChange: function() {
|
||
|
|
console.log('year changed.');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
multiDayEvents: {
|
||
|
|
startDate: 'startDate',
|
||
|
|
endDate: 'endDate'
|
||
|
|
},
|
||
|
|
showAdjacentMonths: true,
|
||
|
|
adjacentDaysChangeMonth: false
|
||
|
|
});
|
||
|
|
|
||
|
|
// calendars.clndr2 = $('.cal2').clndr({
|
||
|
|
// template: $('#template-calendar').html(),
|
||
|
|
// events: eventArray,
|
||
|
|
// startWithMonth: moment().add('month', 1),
|
||
|
|
// clickEvents: {
|
||
|
|
// click: function(target) {
|
||
|
|
// console.log(target);
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
|
||
|
|
// bind both clndrs to the left and right arrow keys
|
||
|
|
$(document).keydown( function(e) {
|
||
|
|
if(e.keyCode == 37) {
|
||
|
|
// left arrow
|
||
|
|
calendars.clndr1.back();
|
||
|
|
calendars.clndr2.back();
|
||
|
|
}
|
||
|
|
if(e.keyCode == 39) {
|
||
|
|
// right arrow
|
||
|
|
calendars.clndr1.forward();
|
||
|
|
calendars.clndr2.forward();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|