How to create a schedule using telerik control in asp.net?

Hi Guys In this tutorial, we will learn "How to create a schedule using Telerik control in asp.net". First of all, what is the schedule and how we can create the schedule? The schedule is our daily work or our daily business or professional work. In between the work we don't know or forgot our important thing or work like meeting, video conference etc. For the remember your work we create the schedule. It is not necessary to create a schedule on paper, virtually, mobile TODO, etc. In this tutorial, we will create the schedule as technically. Now it's fine the create schedule but the second question is "What is a Telerik".

What is Telerik?

Telerik is a vendor which provides rich Windows/ASP.NET/WPF controls and component for which you have to pay.

I hope all of you understand the what we will learn in this tutorial. so let's' start. Open visual studio and create a new empty project with the proper name. after creating the empty project we should create Database and table with the columns are Id, Subject, Description, Date, StartTime, EndTime. Because we will use this data to create the schedule that's why we should create the database and table.
For create the DATABASE, open SQL Server Management Studio and connect your server then left side Object Explorer Box are available. Right click on Databases and click on New Database. There open New Database modal and write your Database name in Database name text box and click on OK button and your Database is created. For ensuring that your Database is created or not then collapse the Databases and you can see your created Database. Now we create the table of tbl_schedule with above fields using the create table script.

Tbl_Schedule

CREATE TABLE [dbo].[tbl_schedule](
 [Id] [int] IDENTITY(1,1) NOT NULL,
 [Date] [date] NULL,
 [StartTime] [time](7) NULL,
 [EndTime] [time](7) NULL,
 [Subject] [varchar](max) NULL,
 [Description] [varchar](max) NULL,
 CONSTRAINT [PK_tbl_schedule] PRIMARY KEY CLUSTERED 
(
 [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

our database and table are created, you can insert the data into a table by manually or you can create a form for insert the actual data in the table. we do not create the form for inserting data into the table but inserting data manually in the table. After everything is OK from the DATABASE side we should to come on the development side. we have created the empty project and there is one web.config available. Open web.config file and add the below code.

Web.Config

<appSettings>
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
</appSettings>

<system.web>
    <httpHandlers>
      <!-- This is the primary handler used to fetch most of the needed resources -->
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
      <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />
      <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false" />
      <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false" />
      <add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false" />
      <add verb="GET" path="CrystalImageHandler.aspx" type="CrystalDecisions.Web.CrystalImageHandler, CrystalDecisions.Web, Version=13.0.2000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" />
    </httpHandlers>
    <httpModules>
      <!-- Only needed if the obsolete RadUpload is used in the site -->
      <!--    <add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule" /> -->
      <!-- Only needed if RadCompression is used in the site. IIS7+ offers built-in dynamic content compression -->
      <!--    <add name="RadCompression" type="Telerik.Web.UI.RadCompression" />  -->
    </httpModules>
    <compilation debug="true" targetFramework="4.6" />
    <httpRuntime targetFramework="4.6" />
    <pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
      <controls>
        <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" />
      </controls>
    </pages>
</system.web>

<system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <remove name="ChartImage_axd" />
      <remove name="Telerik_Web_UI_SpellCheckHandler_axd" />
      <remove name="Telerik_Web_UI_DialogHandler_aspx" />
      <remove name="Telerik_RadUploadProgressHandler_ashx" />
      <remove name="Telerik_Web_UI_WebResource_axd" />
      <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode" />
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode" />
      <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
      <add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode" />
      <add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode" />
      <add name="CrystalImageHandler.aspx_GET" verb="GET" path="CrystalImageHandler.aspx" type="CrystalDecisions.Web.CrystalImageHandler, CrystalDecisions.Web, Version=13.0.2000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" preCondition="integratedMode" />
    </handlers>
    <modules>
      <remove name="ApplicationInsightsWebTracking" />
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
    </modules>
  </system.webServer>

In above code, we configured the Telerik control. For use the Telerik control from the toolbox but by default there no any Telerik controls are available. So let's add the Telerik controls in the toolbox. Right click on toolbox section and select Add Tab option, enter the name of tab and your tab is created then right click on your created tab and select Choose Items option and Choose Toolbox Items Popup is open, click on Browse button and select the your Downloaded Telerik control related dll files and click on OK button. Now you can see Telerik controls are available in your created Tab. Go to solution explorer and open your created project expand the References and check there Telerik controls dll files are available or not, if not then Right click on References and click on Add Reference and select the Browse option and select the Telerik Dll files where you downloaded.

For creating schedule and binding the data in Schedule we use the Entity Framework. Create new folder (Models) in project then right click on Models folder, click on Add New Item and Open the Add New Item Popup then from left side click on Data option and select ADO.NET Entity Data Model and give the proper name of Model and click on Add button. Open Entity Data Model Wizard and select the EF Designer from database option then click on Next button and on the next step select the Data Connection or create New connection then click on Next button and Choose your database objects and settings and finally click on finish button.

Let's create the webform from create a schedule, Right click on the project and click on Add New Item and select the web option from left side section. There are many options are available from there select the Web From option and enter the name of Selected Web Form. Open the created Web Form Page and Register the Telerik control on top of the page by below code.

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TelerikControl.WebForm1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Schedule Management</title>
    <style type="text/css">
        .setHeight
        {
            overflow:scroll;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <div>
            <telerik:RadAjaxPanel ID="rapMain" runat="server">
                <div>
                    <center><h1>Schedule</h1></center>
                </div>
                <asp:Panel runat="server" Height="500px">
                    <div style="margin-top: 30px">
                        <telerik:RadScheduler ShowFooter="true" RenderMode="Auto" Height="500px" CssClass="setHeight"
                        AppointmentStyleMode="Simple" runat="server" ID="RadScheduler1" OverflowBehavior="Expand"
                        DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End" Localization-HeaderAgendaAppointment="Task"
                        DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentId"
                        DataReminderField="Reminder" AdvancedForm-Enabled="false" AdvancedForm-Modal="false" MinutesPerRow="30" ShowAllDayRow="false" ReadOnly="true">
                        <AgendaView UserSelectable="true" ResourceMarkerType="Block" />
                        <AppointmentTemplate>
                            <div class="appointmentHeader">
                                <%#Eval("Subject") %>
                            </div>
                        </AppointmentTemplate>
                        <TimeSlotContextMenuSettings EnableDefault="true" />
                    </telerik:RadScheduler>
                    </div>
                </asp:Panel>
            </telerik:RadAjaxPanel>
        </div>
    </form>
</body>
</html>

In the above code, we have added the Telerik controls create scheduler, Now bind the data with the Scheduler we should write the code from code behind. For the Scheduler, we must create the AppointMent Info class and assign the AppointmentKey and call the InitializeAppointments function on page load. In the InitializeAppointments function, we bind the data with the scheduler. Let's see the below code for better understanding.

WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using TelerikControl.Models;

namespace TelerikControl
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                InitializeAppointments();
            }
        }

        private const string AppointmentsKey = "Telerik.Web.Examples.Scheduler.BindToList.CS.Apts";

        private List<AppointmentInfo> Appointments
        {
            get
            {
                List<AppointmentInfo> sessApts = Session[AppointmentsKey] as List<AppointmentInfo>;
                if (sessApts == null)
                {
                    sessApts = new List<AppointmentInfo>();
                    Session[AppointmentsKey] = sessApts;
                }

                return sessApts;
            }
        }

        private void InitializeAppointments()
        {
            Appointments.Clear();
            ExampleEntities1 entity = new ExampleEntities1();

            List<tbl_schedule> schedules = new List<tbl_schedule>();

            schedules = entity.tbl_schedule.ToList();

            foreach (var schedule in schedules)
            {
                DateTime startDateTime = new DateTime();
                DateTime endtDateTime = new DateTime();

                string startDate = string.Empty;
                string starttime = string.Empty;

                string enddate = string.Empty;
                string endtime = string.Empty;

                if (schedule.Date != null && schedule.StartTime != null && schedule.EndTime != null)
                {
                    startDate = schedule.Date.Value.ToString("dd/MM/yy");

                    starttime = schedule.StartTime.Value.ToString();
                    starttime = DateTime.ParseExact(starttime, "HH:mm:ss", CultureInfo.CurrentCulture).ToString("hh:mm tt");

                    startDateTime = DateTime.ParseExact(startDate + " " + starttime, "dd/MM/yy hh:mm tt", CultureInfo.InvariantCulture);

                    enddate = schedule.Date.Value.ToString("dd/MM/yy");

                    endtime = schedule.EndTime.Value.ToString();
                    endtime = DateTime.ParseExact(endtime, "HH:mm:ss", CultureInfo.CurrentCulture).ToString("hh:mm tt");

                    endtDateTime = DateTime.ParseExact(enddate + " " + endtime, "dd/MM/yy hh:mm tt", CultureInfo.InvariantCulture);

                    Appointments.Add(new AppointmentInfo(schedule.Description, startDateTime, endtDateTime, string.Empty, null, new Reminder(15).ToString(), schedule.Id));
                }
            }
            RadScheduler1.DataSource = Appointments;
        }

    }
    class AppointmentInfo
    {
        private readonly string _id;
        private string _subject;
        private DateTime _start;
        private DateTime _end;
        private string _recurrenceRule;
        private string _recurrenceParentId;
        private string _reminder;
        private int? _userID;

        public string ID
        {
            get
            {
                return _id;
            }
        }

        public string Subject
        {
            get
            {
                return _subject;
            }
            set
            {
                _subject = value;
            }
        }

        public DateTime Start
        {
            get
            {
                return _start;
            }
            set
            {
                _start = value;
            }
        }

        public DateTime End
        {
            get
            {
                return _end;
            }
            set
            {
                _end = value;
            }
        }

        public string RecurrenceRule
        {
            get
            {
                return _recurrenceRule;
            }
            set
            {
                _recurrenceRule = value;
            }
        }

        public string RecurrenceParentID
        {
            get
            {
                return _recurrenceParentId;
            }
            set
            {
                _recurrenceParentId = value;
            }
        }

        public int? UserID
        {
            get
            {
                return _userID;
            }
            set
            {
                _userID = value;
            }
        }

        public string Reminder
        {
            get
            {
                return _reminder;
            }
            set
            {
                _reminder = value;
            }
        }

        private AppointmentInfo()
        {
            _id = Guid.NewGuid().ToString();
        }

        public AppointmentInfo(string subject, DateTime start, DateTime end,
            string recurrenceRule, string recurrenceParentID, string reminder, int? userID) : this()
        {
            _subject = subject;
            _start = start;
            _end = end;
            _recurrenceRule = recurrenceRule;
            _recurrenceParentId = recurrenceParentID;
            _reminder = reminder;
            _userID = userID;
        }

        public AppointmentInfo(Appointment source) : this()
        {
            CopyInfo(source);
        }

        public void CopyInfo(Appointment source)
        {
            Subject = source.Subject;
            Start = source.Start;
            End = source.End;
            RecurrenceRule = source.RecurrenceRule;
            if (source.RecurrenceParentID != null)
            {
                RecurrenceParentID = source.RecurrenceParentID.ToString();
            }

            if (!String.IsNullOrEmpty(Reminder))
            {
                Reminder = source.Reminders[0].ToString();
            }

            Resource user = source.Resources.GetResourceByType("User");
            if (user != null)
            {
                UserID = (int?)user.Key;
            }
            else
            {
                UserID = null;
            }
        }
    }
}

After Set up the above all codes, configuration and setting build your project if any errors occurred on build time then resolve it and finally Run the project and see the Scheduler. By default scheduler showing with business Hours, you can change it on Showing 24 hours scheduler. The Showing 24 Hours option available at the bottom of Scheduler. In the Scheduler, you can view the schedule on Weekly, Monthly, and Yearly. you can navigate the date and month by left side top corner Calendar option. If you want to do more functionality of Scheduler then visit the Telerik Scheduler Site and do your more.

Thanks a lot