JavaScript Event Calendar

The JavaScript Calendar is a UI component that shows a daily or weekly calendar with days as columns. You can use it to schedule meetings, tasks, reservations and other events.

The calendar supports drag and drop operations (such as event creating, moving, resizing). The appearance and behavior is fully customizable.

The calendar component is available for JavaScript, TypeScript, Angular, React, and Vue.

Download Live Demo

Calendar Component Features

In addition to features included in the open-source version, the Pro version includes these advanced features:

• All-day events
• Fixed-width columns that can display many days or resources (with a horizontal scrollbar)
• Resources displayed using a hierarchy of columns
• Touch support (mobile devices - phones, tablets, including iPhone and iPad)
• External drag and drop (drag events from an external list)
• Resizing columns using drag an drop
• Moving columns using drag an drop
• Progressive event rendering that optimizes rendering - allows loading large data sets
• Image export (JPEG, PNG, BMP), PDF export, printing
• Custom cell duration (1 - 60 minutes)
• Custom header cell duration (1 - 60 minutes)
• Event active areas - add interactive elements, icons, symbols, texts to the calendar event box
• Hover bubble that displays details of calendar events
• Overnight scheduling (e.g. display a calendar from 5pm to 4am)
• Event selecting (select events using mouse or using the API and use CSS to highlight the selected events)
• Inline editing (enter an in-place edit mode)
• Copy and paste
• Built-in message bar
• Add icons or images to a specified position inside events
• Crosshair that highlights the current mouse position
• Cell customization (holidays, lunch break)

Open-Source Event Calendar Tutorials

These tutorials use the open-source version of the calendar component:

• HTML5/JavaScript Event Calendar
  Basic tutorial that explains how to connect the calendar component to a PHP/ASP.NET Core backend.
• JavaScript Resource Calendar Tutorial (PHP/MySQL)
  How to use HTML5/JavaScript resource calendar component to create a dynamic schedule. The calendar loads data (resources and events) using a REST API that is implemented using PHP and MySQL.
• HTML5 Calendar with Day/Week/Month Views
  A tutorial that integrates day/week/month views and a navigator for switching the current date (PHP).

JavaScript Event Calendar Tutorials

• Event Calendar for JavaScript
  Basic tutorial that shows how to set up the event calendar in a simple PHP web application.
• HTML5 Doctor Appointment Scheduling
• Weekly calendar view that displays doctor appointments. Patients can see free appointment slots, doctors can manage scheduled appointments. Uses PHP backend.

Angular Tutorials

Learn how to use the Angular calendar component in your own application.

• Angular Appointment Calendar (TypeScript + PHP/MySQL)
  Appointment calendar with integrated Navigator for changing the visible week. PHP/MySQL backend.

React Tutorials

Download an example React project that shows how to use the React calendar component:

• React Weekly Calendar Tutorial
  React application with a weekly event calendar component. Users can change the visible week using a date picker.
• Next.js Weekly Calendar (Open-Source)
  How to add an interactive scheduling calendar to your Next.js application.

Vue Tutorials

You can use the Vue calendar component to create a weekly calendar view:

• Vue Weekly Calendar Tutorial
  How to create a weekly calendar using Vue.js calendar component. The tutorial include a Vue.js project with JavaScript source code for download.

Calendar UI Builder

Create a quick proof of concept using Calendar UI Builder. You can use this visual tool to configure the Scheduler appearance and properties and generate a downloadable project. 

The UI Builder can generate the following project types:

• HTML5/JavaScript
• JavaScript (NPM package)
• TypeScript (NPM package)
• Angular 
• React
• Vue

Event Calendar Initialization

See also Event calendar tutorial.

<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />

<div id="dp"></div>

<script type="text/javascript">
    var dp = new DayPilot.Calendar("dp");

    // behavior and appearance
    dp.cssClassPrefix = "calendar_white";

    // view
    dp.startDate = "2016-03-25";
    dp.days = 1;

    var e = new DayPilot.Event({
        start: new DayPilot.Date("2016-03-25T00:00:00"),
        end: new DayPilot.Date("2016-03-27T00:00:00"),
        id: DayPilot.guid(),
        text: "Event"
    });
    dp.events.add(e);
    dp.init();
</script>

Event Calendar jQuery Plugin

See also Event Calendar jQuery plugin.

<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("dp").daypilotCalendar({
      cssClassPrefix: "calendar_white",
      startDate: "2016-03-25",
      days: 1
    });
</script>

Event Bulk Loading

See also Event loading.

dp.events.list = [
{
  start: "2016-03-25T00:00:00",
  end: "2016-03-27T00:00:00",
  id: "1",
  text: "Event 1"
},
{
  start: "2016-03-26T12:00:00",
  end: "2016-03-27T00:00:00",
  id: "2",
  text: "Event 2"
}
];
dp.update();

Adding an Event to the Event Calendar

See also Client-side event API.

var e = new DayPilot.Event({
  start: new DayPilot.Date("2016-03-25T00:00:00"),
  end: new DayPilot.Date("2016-03-27T00:00:00"),
  id: DayPilot.guid(),
text: "Event"
});

dp.events.add(e);

Drag and Drop Event Moving

See also Event moving.

// event moving
dp.onEventMoved = function (args) {
    dp.message("Moved: " + args.e.text());
};

Drag and Drop Event Resizing

See also Event resizing.

// event resizing
dp.onEventResized = function (args) {
    dp.message("Resized: " + args.e.text());
};

Drag and Drop Event Creating

See also Event creating.

// event creating
dp.onTimeRangeSelected = function (args) {
    var name = prompt("New event name:", "Event");
    if (!name) return;
    var e = new DayPilot.Event({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: "Event"
    });
    dp.events.add(e);
    dp.clearSelection();
    dp.message("Created");
};

Time Header Customization (onBeforeTimeHeaderRender)

See also Time header customization.

dp.onBeforeTimeHeaderRender = function(args) {
    args.header.html = args.header.hours + ":" + args.header.minutes + " *";
    args.header.areas = [ {left: 0, top: 0, right: 0, bottom: 0, v: "Hover", action: "JavaScript", js: function(e) { alert(e.start);} } ];
}; 

Time Cell Customization (onBeforeCellRender)

See also Time cell customization.

dp.onBeforeCellRender = function(args) {
    if (args.cell.start.getHours() === 13) {
        args.cell.html = "break";
        args.cell.backColor = "red";
    }
};

Column Header Customization (onBeforeHeaderRender)

See also Column header customization.

dp.onBeforeHeaderRender = function(args) {
    args.header.html += "*";
};

Event Customization (onBeforeEventRender)

See also Event customization.

dp.onBeforeEventRender = function(args) {
    args.e.cssClass = "test";
    args.e.html = args.e.text + ":";
};

Event Click

See also Event click.

dp.onEventClick = function(args) {
    alert("clicked: " + args.e.id());
};

Event Context Menu

See also Event context menu.

dp.contextMenu = new DayPilot.Menu([
    {text:"Show event ID", onclick: function() {alert("Event value: " + this.source.value());} },
    {text:"Show event text", onclick: function() {alert("Event text: " + this.source.text());} },
    {text:"Show event start", onclick: function() {alert("Event start: " + this.source.start().toStringSortable());} },
    {text:"Go to google.com", href: "http://www.google.com/?q={0}"},
]);

Event Bubble (Extended ToolTip)

See also Event bubble.

// bubble, with async loading
dp.bubble = new DayPilot.Bubble({
    cssClassPrefix: "bubble_default",
    onLoad: function(args) {
        var ev = args.source;
        args.async = true;  // notify manually using .loaded()
        
        // simulating slow server-side load
        setTimeout(function() {
            args.html = "testing bubble for: <br>" + ev.text();
            args.loaded();
        }, 500);
    }
});

CSS Themes

The event calendar supports full CSS styling.

You can create your own CSS theme using the online theme designer.

See also CSS themes.

// behavior and appearance
dp.cssClassPrefix = "calendar_white";

All-Day Events

See also All-day events.

dp.showAllDayEvents = true;
var e = new DayPilot.Event({
    start: new DayPilot.Date("2016-03-25T00:00:00"),
    end: new DayPilot.Date("2016-03-27T00:00:00"),
    id: DayPilot.guid(),
    text: "All-Day Event",
    allday: true
});
dp.events.add(e);

Changing Date of the Event Calendar

See also Manual date switching.

dp.startDate = "2016-07-31";
dp.update();

Changing Day/Week View

Switching to week view.

dp.viewType = "Week";
dp.update();

Switching to day view

dp.viewType = "Day";
dp.update();

Showing Custom Columns

See also Resources view.

dp.viewType = "Resources";
dp.columns = [
  { name: "Monday", start: "2016-07-04" },
  { name: "Wednesday", start: "2016-07-06" }
];
dp.update();

Internationalization (Locale)

See also Localization.

The locale determines first day of week, month names, day of week names, time and date format.

dp.locale = "de-de";
dp.update();

JavaScript Resource Calendar

DayPilot allows to you switch the JavaScript calendar to resource calendar mode that displays resources as columns.

API Reference

• http://api.daypilot.org/daypilot-calendar-class/

Documentation

• DayPilot Event Calendar Documentation