jongallery-itsacalendarmarkeddates
Adds the feature to Calendar to mark Dates. Is an extention to Y.Calendar, meaning that you can call these methods like myCalendar.getModelsInYear(2015);
Even though the methods in this extention can be used right out of the box, it’s recommended to use
gallery-itsacalendarmodellist which uses this extention under the hood. gallery-itsacalendarmodellist uses Y.Models to mark the dates.
All Module-methods can be called without waiting for the Calendar to be rendered
Examples
Documentation
Usage
YUI({gallery: 'gallery-2013.02.27-21-03'}).use('calendar', 'gallery-itsacalendarmarkeddates', function(Y) {
var myCalendar = new Y.Calendar({
contentBox: "#mycalendar",
height:'300px',
width:'300px'
});
myCalendar.render();
var date1 = new Date(2013,01,02),
date2 = new Date(2013,01,05),
dateArray;
dateArray.push(date1);
dateArray.push(date2);
myCalendar.markDates(dateArray);
// now check if date2 is marked:
Y.log('Is date2 marked? '+myCalendar.dateIsMarked(date2));
});
Custom styling:
The way matched-Dates are styled can be altered by overruling these styles:
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-itsa-markeddate {}
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-itsa-markeddate:hover {}
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-prevmonth-day.yui3-itsa-markeddate,
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-nextmonth-day.yui3-itsa-markeddate,
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-prevmonth-day.yui3-itsa-markeddate:hover,
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-nextmonth-day.yui3-itsa-markeddate:hover {}
To make sure your new rule takes higher precedence, be sure you give it a finer declaration. For example no dots but red color:
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-content .yui3-itsa-markeddate {
background-image: none;
color: #F00;
}
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-content .yui3-itsa-markeddate:hover {
background-image: none;
color: #F00;
}
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-content .yui3-calendar-prevmonth-day.yui3-itsa-markeddate,
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-content .yui3-calendar-nextmonth-day.yui3-itsa-markeddate,
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-content .yui3-calendar-prevmonth-day.yui3-itsa-markeddate:hover,
.yui3-skin-sam .yui3-calendar-itsa-markeddates .yui3-calendar-content .yui3-calendar-nextmonth-day.yui3-itsa-markeddate:hover {
background-image: none;
color: #A00;
}
License
Copyright (c) 2013 Its Asbreuk