Tutorial: Rapidly Build Powerful Custom Calendars In Javascript

Whether you are an individual or a business, organizing your personal or professional time with effective scheduling is an important part of being efficient. Most people organize their days using a calendar of some sort. If you are keeping track of your next Zoom meeting, tracking your deadlines, or trying to remember a co-worker’s birthday, calendars keep you on track. They help you avoid the unpleasant surprise and embarrassment of missed appointments.

However, to be truly useful, a calendar also has to be available. That means having access to your scheduling information or personal calendar on all of your devices, not just your laptop or company desktop.

This demand for always-there calendar information has spurred the development of a number of complex web calendar ui components. While it may be difficult to choose and implement the one that is right for you there is an easy solution — the Ext JS calendar component. The Ext JS calendar has all the high-end scheduling features you will ever need. These include creating or moving events with drag and drop, easy Google Calendar account connection, and much more!  With Ext JS, you can easily build and drop the calendar perfect for you straight to your app.

Today we are going to implement a powerful calendar in a few steps that cover all the important details and use best practices.

How can I get Getting Started with Sencha CMD?

The first step, as always begins, in Sencha CMD. If you still don’t have Sencha CMD, you can download it for free here.

Once you have it installed you can make sure you have it properly installed and configured by running this command on terminal/shell:

$ sencha

If it returns the sencha cmd version, you are good to go. Here are more details on how to install, configure and use Sencha CMD, but this article will show all the important details.

How can I create the Sencha application?

The first thing you want to do is create your project structure. Sencha CMD can do this for you easily–all you need to do is run this command. If you have any questions, take a look at the bullet points below. They explain what everything in the command does and what you will need to change to personalize your application.

sencha -sdk /Users/fabio/sencha-sdks/ext-7.4.0/ generate app modern Calendar ./calendar-extjs

• /Users/fabio/sencha-sdks/ext-7.4.0/ is where your Ext JS folder is.
• Calendar is the name of our application and the namespace for our classes.
• ./calendar-extjs is the path for our project structure and the necessary files.
• modern is the toolkit for our application.

Make sure when you run this command that there is no error on the output. If there is no error, and everything runs correctly, you have successfully created your project structure. To be sure, however, let’s run our application with the initial structure. To do this, first navigate to your project folder:

$ cd calendar-extjs/

Then, run the command to open the server on a specific port:

$ sencha app watch

The output of this command will return the URL where your app is available. In this case, it is running on  http://localhost:1841/. When you open it on your browser you will see a screen like this:

How can I clean up the Sencha project?

Once you have your basic project running, you can clean it up by removing the files and components that you don’t need.

Use the command shown below to delete your unwanted files. While deleting, keep another terminal open and have the Sencha app running because it will update the application automatically:

$ rm app/model/* app/store/* app/view/main/List.*

With that done, let’s clean up our classes in app/view/main. Make sure your three classes look like this:

Main.js:

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting causes an instance of this class to be created and
 * added to the Viewport container.
 */
Ext.define('Calendar.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'app-main',
    controller: 'main',
    viewModel: 'main'
});

MainController.js:

/**
 * This class is the controller for the main view for the application. It is specified as
 * the "controller" of the Main view class.
 */
Ext.define('Calendar.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main'
});

MainModel.js:

/**
 * This class is the view model for the Main view of the application.
 */
Ext.define('Calendar.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',
    data: {}
});

After that, test the app again in your browser console to make sure it is running perfectly without errors. For now, it should show a panel without content.

How can I add the Calendar package?

The calendar package is an “add-on” of the Ext JS product so you need to install it to your project. All details are described here. Begin by downloading it extract it to your project:

In your project root, create the folder where you will copy the calendar package:

$ mkdir -p packages/local/calendar

Then, copy the package to the new folder:

$ cp -R /Users/fabio/sencha-sdks/ext-addons-7.4.0/packages/calendar packages/local/calendar

After that, add to the “requires” config of your app.json file:

{
    "name": "Calendar",
    ...
    "requires": [
        "font-awesome",
        "calendar"
    ],
    ...
}

After that, refresh your project and run the watch command again to make sure the package will be loaded correctly:

$ sencha app refresh

$ sencha app watch

How can I create the Calendar View?

The calendar view is very simple, really! Just add the calendar and its store. The final class will look like this:

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting causes an instance of this class to be created and
 * added to the Viewport container.
 */
Ext.define('Calendar.view.main.Main', {
    extend: 'Ext.Panel',
    requires: ['Ext.calendar.panel.Panel'],
    xtype: 'app-main',
    controller: 'main',
    viewModel: 'main',
    items: {
        xtype: 'calendar',
        // store to load the calendars
        store: {
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'resources/data/calendars.json'
            },
            // the configuration for the events store loaded to the calendar component
            eventStoreDefaults: {
                proxy: {
                    type: 'ajax',
                    url: 'resources/data/events.json'
                }
            }
        }
    }
});

How do I create a Calendar Data structure?

Creating the data model for the calendar is also very simple. For our app, we will use JSON files to simulate the server response. The property names explain what each property is used for:

calendar.json:

[{
    "id": 1,
    "title": "Work"
}]

events.json:

[{
    "id": 2001,
    "calendarId": 1,
    "startDate": "2021-07-03T21:30:00.000Z",
    "endDate": "2021-07-04T22:30:00.000Z",
    "title": "Meet with Development",
    "description": "Discuss the current cycle requirements"
}]

Save these files in resources/data folder of your project (you will have to create it).

How can I run the Sencha Calendar Application?

Once you have finished your code and saved all changes, access the app on http://localhost:1841/ to test.

On the left side you can see all calendars available and the button to create new events and on the center of the screen the calendar itself with many options including day, month, and year view and the calendar navigation. Remember, this is a responsive app and your calendar will also work on smartphones and tablets.

What is the next?

Now you can implement the powerful Ext JS Calendar, explore the Calendar example to show multiple options available, and also connect to a google account to show google events on your calendar.

Try creating your own Calender from scratch using Sencha Ext JS and personalizing it to meet your exact needs, you will be surprised how quick, easy, and effective it is.

Download the full source code for the Calendar project.