Overview
You can mark selected days of the JavaScript monthly calendar as disabled.
Disabled days will not allow any drag and drop operations (creation of new events, moving existing events, etc.).
Requires DayPilot Pro for JavaScript 2022.2.5287 or higher.
Includes a trial version of DayPilot Pro for JavaScript (see License below).
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.
Mark Days as Disabled to Prevent Drag and Drop
The monthly calendar component lets you customize the appearance of the day cells. With the latest release, you can now also mark the cells as disabled which will prevent drag and drop operations.
It doesn’t affect loading existing events from the data source - events that overlap the disabled days will be loaded and displayed normally.
This feature can be useful in different scenarios:
you can disable days in the past and only allow adding events/tasks to future days
you can disable weekends (you can also hide weekends as an alternative)
you can disable custom days (e.g. holidays or days when maintenance takes place)
How to Disable Days in the Past?
You can mark the days as disabled using onBeforeCellRender event handler. This event handler is called once for every day cell displayed by the monthly calendar and you can use it to change the cell properties, including the disabled status.
In addition to marking the day as disabled, we will also add an active area at the bottom of the day cell (gray bar) to provide a visual hint to the users.
const calendar = new DayPilot.Month("dp", {
// ...
onBeforeCellRender: args => {
if (disablePast) {
const disabled = args.cell.start < DayPilot.Date.today();
if (disabled) {
args.cell.properties.disabled = true;
args.cell.properties.areas = [
{
left: 0,
right: 0,
bottom: 0,
height: 5,
backColor: "#aaaaaa"
},
];
}
}
}
});The disabled status of a day cell will prevent all drag and drop operations. The target shadow overlapping a disabled day will be displayed in red:
How to Disable Weekends?
This example uses onBeforeCellRender event handler to disable weekends.
It also add a blue bar and an “X” icon to the bottom of the weekend cells.
const disableWeekends = true;
// ...
const calendar = new DayPilot.Month("dp", {
// ...
onBeforeCellRender: args => {
if (disableWeekends) {
const dayOfWeek = args.cell.start.getDayOfWeek();
const disabled = dayOfWeek === 0 || dayOfWeek === 6;
if (disabled) {
args.cell.properties.disabled = true;
args.cell.properties.areas = [
{
left: 3,
width: 15,
bottom: 5,
height: 20,
fontColor: "#3c78d8",
html: "✖",
},
{
left: 0,
right: 0,
bottom: 0,
height: 5,
backColor: "#3c78d8"
},
];
}
}
}
});How to Disable Holidays?
To disable holidays specified in a special array (holidays) use the onBeforeCellRender event handler to check if the cell date (args.cell.start) is in the list of holidays. You can also display the holiday name in the calendar day cell.
This example adds a yellow bar and the holiday name to the bottom of the calendar cell:
const disableHolidays = true;
const holidays = [
{date: "2022-05-01", name: "Labour Day"}
];
// ...
const calendar = new DayPilot.Month("dp", {
// ...
onBeforeCellRender: args => {
if (disableHolidays) {
const disabled = holidays.find(item => new DayPilot.Date(item.date) === args.cell.start);
if (disabled) {
args.cell.properties.disabled = true;
args.cell.properties.areas = [
{
left: 3,
width: 15,
bottom: 5,
height: 20,
fontColor: "#f1c232",
html: "✖",
},
{
left: 0,
right: 0,
bottom: 5,
height: 20,
text: disabled.name,
horizontalAlignment: "center"
},
{
left: 0,
right: 0,
bottom: 0,
height: 5,
backColor: "#f1c232"
},
];
}
}
}
});
How to Disable Maintenance Days?
To display the maintenance days and disable them for events, check the day cell overlap with the predefined maintenance dates.
The maintenance days are defined as an array of items with start and end date:
const maintenance = [
{start: "2022-05-09", end: "2022-05-10"}
];This example checks the maintenance days and highights them in the calendar.
When checking the overlap with the maintenance days, we using DayPilot.Util.overlaps() method which allows comparing two date ranges. Note that this method uses exact date points so we need to add one day to the maintenance range end value (to make it an end of the specified date).
const disableMaintenance = true;
const maintenance = [
{start: "2022-05-09", end: "2022-05-10"}
];
// ...
const calendar = new DayPilot.Month("dp", {
// ...
onBeforeCellRender: args => {
if (disableMaintenance) {
const disabled = maintenance.find(item => DayPilot.Util.overlaps(args.cell.start, args.cell.end, new DayPilot.Date(item.start), new DayPilot.Date(item.end).addDays(1)));
if (disabled) {
args.cell.properties.disabled = true;
// args.cell.properties.backColor = "#f1c23299";
args.cell.properties.areas = [
{
left: 3,
width: 15,
bottom: 5,
height: 20,
fontColor: "#cc4125",
html: "✖",
},
{
left: 0,
right: 0,
bottom: 5,
height: 20,
text: "Maintenance",
horizontalAlignment: "center"
},
{
left: 0,
right: 0,
bottom: 0,
height: 5,
backColor: "#cc4125"
},
];
}
}
}
});
