Fork me on GitHub

Example: Add a class to style today's cell

Add a class to style today's cell.

Basic example

Display today's cell in red.

HTML

<div class='demoContainer' id='container1'></div>
<div class='demoContainer' id='container2'></div>
<div class='demoContainer' id='container3'></div>

JavaScript

Implementation

YUI().use('calendar', 'inputex-calendar-today-highlight-plugin', function(Y) {
   
   // use a two-pane calendar
   Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;
   
   var calendar = new Y.Calendar({
         contentBox: '#container1',
         width: "700px",
         showPrevMonth: true,
         showNextMonth: true,
         // add the plugin to the config
         plugins: [Y.Plugin.CalendarTodayHighlight],
         // custom header for two-pane calendar
         headerRenderer: function (curDate) {
            var ydate = Y.DataType.Date;
            return (ydate.format(curDate, {format: "%B %Y"}) +
               " &mdash; " +
               ydate.format(ydate.addMonths(curDate, 1), {format: "%B %Y"}));
         }
   });
   
   calendar.render();
   
});