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. Buy a license.

Basic Event Calendar Tutorial

This tutorial assumes you already have the event calendar set up. The sample project includes a complete configuration but it isn't explained in the text.

Adding Icons for Specific UI Actions

We will use the active areas feature to add icons with extended functionality to the calendar event boxes. We will define the active areas using onBeforeEventRender event handler. You can also define them on the server side and send the "areas" property with the event data. However, it is usually more convenient to define the active areas on the client side:

you don't mix the appearance with the data

it will get applied to events that you add using the client-side API - .events.add()

Icons

The project comes with a special icon font that includes a set of UI icons. It works the same way as Font Awesome (you can also use font awesome icons instead).

You will find the font files in "icons" directory of the project download. To use the icons, copy the directory to your project and include the stylesheet:

<link rel="stylesheet" href="icons/style.css" type="text/css" />

Once the stylesheet is loaded the icons can be applied using of the "icon-*" classes:

<i class="icon-info"></i>

Custom Move Drag Handle

We will add a custom drag handle to the upper-left corner of the event. The position and dimensions are defined using the following properties:

left

top

height

width

The action is set to "Move". That will make the area "active" - if you start dragging (using a mouse cursor or touch) the moving will be activated immediately. Note that the default touch moving configuration (without an active area) requires a tap-and-hold gesture to activate the dragging.

Displaying Event Details using a Bubble

We will add two active areas to the upper-right corner: one for event details (bubble) and another one for context menu.

The "Bubble" action activates a bubble (defined using .bubble property) with custom HTML. This action requires "tap" gesture on the touch devices. On the desktop, it is enough to hover the icon with a mouse cursor.

Disabling the Default Drag and Drop Handlers

This step is not necessary. However, it makes the UI consistent on the desktop and mobile devices.

The default value of .moveBy property is "Full":

Desktop: With this setting the event moving can be started by pressing the mouse button anywhere on the event. As soon as the user reaches the top or bottom of the event box the cursor changes to "resize" and it will start event resizing on mousedown.

Touch devices: Moving can be start using tap-and-hold gesture. Resizing is not enabled.

We will disable this behavior by setting moveBy to "None".

dp.moveBy = "None";

This way only the active areas will allow drag and drop.

Mobile CSS Theme

The sample project uses a special theme adjusted for use on small screens. This theme was created using the online theme designer.

It is modified to support styling more appropriate for the mobile devices - the elements dimensions are increased using the calendar config. The theme is adjusted to work better with the increased element size.

The borders are turned off and the color scheme is more contrast.

The theme stylesheet is included in the header:

<link type="text/css" rel="stylesheet" href="themes/dark.css" />

The theme is activate using .theme property:

dp.theme = "dark";

You can further customize the theme by opening it in the theme designer, click "Edit" to activate the editor. You can modify the colors, fonts, borders, and other properties:

Dimensions Customized for Small Mobile Devices

The dimensions are not defined in the CSS theme - they are set using dedicated properties of the Scheduler.

We will customize headerHeight so we can use bigger font and padding. HourWidth property controls the width of the time header on the left side of the scheduler. CellHeight specifies the height of the default grid cell (which represents 30 minutes in the default setting).

How to configure the JavaScript Scheduler control to provide additional functionality on mobile and touch devices (iOS, Android). Includes a sample PHP project with SQLite database, custom CSS theme and a set of font icons.