You are here: Home / Documentation / How To's / How to block calendar dates in Plone TTW

How to block calendar dates in Plone TTW

by klotzj27 — published May 10, 2010 02:35 PM, last modified Aug 16, 2016 10:50 AM
Plone uses the Dynarch DHTML Calendar, version 1.0 to render popup calendars when selecting a date from a Calendar Widget in a DateTimeField. Below is an explanation of a couple important JS Calendar files and an example of how I blocked out a set of calendar dates on a particular calendar.

Important Calendar Files

calendar.js - The calendar object constructor can be found here. For a better understand of the calendar parameters look in this file.

calendar-setup.js - This file sets up a helper function to patch an input field or other element to use a calendar widget for date selecton.

calendar_formfield.js - The JS calendar glue. This JS binds the JS calendar to DateTimeField's Calendar Widget in a form. 

calendar_macros.pt - Creates the template for Calendar Widget which the JS calendar binds to.

 

Setting the setDateStatusHandler property

The JS Calendar has a property named setDateStatusHandler which accepts a unary function that should check a date object and return true if it should be shown and false if the date should be disabled. So in order to disabled a set of dates we first must create our unary function. I set up my unary function to look at a hidden list of dates placed in the header by way of a portal property, named disabled_tour_dates. If the date is in the list of dates, true is returned and when the calendar is rendered the dates in disabled_tour_dates are disabled in the JS calendar. My unary function below:

function isDisabledDate(date, y, m, d) {
if (typeof(disabledJSDatesList) === "undefined"){
disabledJSDatesList = getDisabledDates();
}
if (typeof(currentDate) === "undefined"){
currentDate = new Date();//getting the current date... Date objects use the current system time if no parameters are passed
}
for (var i=0;i<=disabledJSDatesList.length-1;i++) {
if (disabledJSDatesList[i].toLocaleDateString() == date.toLocaleDateString() || date < currentDate) {return true;}//block out dates in the list and dates that have already passed
else {continue;}
return false;
}}

 

Selecting a particular calendar

The problem is that this method runs everytime a calendar is created and bound to a field so I added a simple if statement in calendar_formfield.js to target only a particular calendar. See below for example:

// show calendar popup
    show: function(input_id, yearStart, yearEnd) {
        var cal = plone.jscalendar._cal;
        if (!cal) {
            cal = plone.jscalendar._cal = new Calendar(
                    // firstdDay, datestr, onSelect, onClose
                    1, null, plone.jscalendar.handle_select, 
                    plone.jscalendar.handle_close
            );
            if (input_id === '#edit_form_date-request_0'){//just disable dates on the campus visit registration forms Date Request field
            this._cal.setDateStatusHandler(isDisabledDate);
            }
            cal.create();
        } else
            cal.hide();

 

This is a fairly simple example but it can be extended to do many other things with the JS Calendars whether TTW or in your product. The dynarch documentation for the JS Calendar is located at http://www.dynarch.com/static/jscalendar-1.0/doc/html/reference.html and is incredibly useful if you wish to do more with the JS Calendar.

Navigation