New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Integrate Google Calenar in Telerik UI Scheduler


Product Telerik UI for ASP.NET MVC Scheduler


How can I connect a Scheduler HtmlHelper with the Google Calendar?


  1. Declare the Base calendar Url.
  2. Declare the Base calendar Id for public holidays.
  3. Get and declare your API_KEY.
  4. Declare the specification for the region of the calendar.
  5. Concatenate the steps above to use the complete resul Url.
  6. Fetch the url to get the result response.
  7. Add the needed properties of the events of the calendar to the dataSource of the Scheduler.
    $(document).ready(function () {
        const BASE_CALENDAR_URL = "";
        const API_KEY = "YourAPI_KEY";
        const CALENDAR_REGION = "en.usa"; 


        fetch(url).then(response => response.json()).then(data => {
            const holidays = data.items;
            var scheduler = $("#scheduler").data("kendoScheduler");

            for (var i = 0; i < holidays.length; i++) {

                    start: new Date(holidays[i],
                    isAllDay: true,
                    end: new Date(holidays[i],
                    title: holidays[i].summary,
                    description: holidays[i].description,
                    TaskID: i + 3,
                    RoomID: 3,
                    editable: {
                        destroy: false

The following image represents the result view of the Scheduler: UI for ASP.NET MVC Scheduler with Google calendar integration example

For the complete implementation on how to connect a Telerik UI Scheduler with the Google Calendar, refer to this ASP.NET MVC GitHub project.

See Also

In this article