<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AppointmentPlanner.aspx.cs" Inherits="WebSampleBrowser.Dashboard.AppointmentPlanner" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Essential Studio for ASP.NET : Appointment Planner</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <link rel="shortcut icon" href='<%= Page.ResolveClientUrl("~/Content/images/favicon.ico")%>' />
    <link rel="stylesheet" href='<%= Page.ResolveClientUrl("~/Content/bootstrap.min.css")%>' />
    <link rel="stylesheet" href='<%= Page.ResolveClientUrl("~/Content/ejthemes/ej.widgets.core.min.css")%>' />
    <link rel="stylesheet" href='<%= Page.ResolveClientUrl("~/Content/ejthemes/flat-saffron/ej.theme.min.css")%>' />
    <link rel="stylesheet" href='<%= Page.ResolveClientUrl("~/Content/ejthemes/responsive-css/ej.responsive.css")%>' />
    <link rel="stylesheet" href='<%= Page.ResolveClientUrl("~/Content/DashBoard/AppointmentPlanner/appointmentplanner.css")%>' />

    <script src='<%= Page.ResolveClientUrl("~/Scripts/jquery-1.11.3.min.js")%>' type="text/javascript"></script>
    <script src='<%= Page.ResolveClientUrl("~/Scripts/jsrender.min.js")%>' type="text/javascript"></script>
    <script src='<%= Page.ResolveClientUrl("~/Scripts/ej.web.all.min.js")%>' type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager>
        <div id="wcontent">
            <img src="../../Content/ejthemes/default-theme/images/waitingpopup.gif" alt="waiting_logo" style="margin-top: 14px; margin-left: 14px;" />
        </div>
        <div class="showcasecontainer">
            <script>
                $(".showcasecontainer").ejWaitingPopup({
                    showOnInit: true,
                    template: $("#wcontent")
                });
            </script>
            <div class="headercontainer">
                <div class="headercontainertext">DOCTOR'S APPOINTMENT SCHEDULER</div>
            </div>
            <div class="contentcontainer">
                <div class="leftcol">
                    <div class="category">
                        <div class="categoryheader">
                            <div class="headertext">CATEGORY</div>
                        </div>
                        <div class="categorycontent">
                            <div class="listbox">
                                <ul id="categorylist"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="doctor">
                        <div class="doctorheader">
                            <div class="headertext">DOCTORS</div>
                        </div>
                        <div class="doctorcontent">
                            <div class="doctorlist">
                                <input type="text" id="doctorlist" />
                            </div>
                        </div>
                        <div class="doctorsdept">
                            <div class="doctorslist">
                                <ul id="doctorsdeptlist"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middlecol">
                    <div id='lefticon'><span class='icon-right'></span></div>
                    <div id='righticon'><span class='icon-left'></span></div>
                    <div class="menubar">
                        <div class="display" role="navigation">
                            <div id="doctor" class="displayleft">
                                <div class="menuheadertext">DOCTORS AVAILABILITY / APPOINTMENTS</div>
                            </div>
                        </div>
                        <div class="displayright" role="search">
                            <ej:ToggleButton ClientIDMode="Static" ID="searchbtn" runat="server" Size="Normal" Width="30px" Height="30px" ShowRoundedCorner="false" ContentType="ImageOnly" DefaultPrefixIcon="icon-search" ActivePrefixIcon="icon-close datesearch" ClientSideOnClick="onSearchClick"></ej:ToggleButton>
                            <div id="searchdata">
                                <div id="searchpanel" style="padding: 0px 5px 0px 5px;">
                                    <div id="searchtype" class="esearch" style="padding-right: 5px;">
                                        <ej:DropDownList ClientIDMode="Static" ID="searchlist" runat="server" SelectedIndex="0" Width="100px" ClientSideOnPopupHide="onSearchtypeHide">
                                            <Items>
                                                <ej:DropDownListItem Text="ID" Value="ID"></ej:DropDownListItem>
                                                <ej:DropDownListItem Text="Name" Value="Name"></ej:DropDownListItem>
                                                <ej:DropDownListItem Text="Description" Value="Description"></ej:DropDownListItem>
                                                <ej:DropDownListItem Text="Category" Value="Category"></ej:DropDownListItem>
                                                <ej:DropDownListItem Text="Date" Value="Date"></ej:DropDownListItem>
                                            </Items>
                                        </ej:DropDownList>
                                    </div>
                                    <div id="search" class="esearch">
                                        <input type="text" id="txtSearch" class="searchbox" onkeyup="searchKeyUp()" />
                                    </div>
                                </div>
                                <div id="datesearchpanel">
                                    <div class="searchdatepicker esearch">
                                        <ej:DatePicker ClientIDMode="Static" ID="startdatepicker" runat="server" Width="120px" WatermarkText="From Date" ClientSideOnSelect="onSearchDateChange" Value="4/1/2016"></ej:DatePicker>
                                    </div>
                                    <div class="searchdatepicker esearch">
                                        <ej:DatePicker ClientIDMode="Static" ID="enddatepicker" runat="server" Width="120px" WatermarkText="To Date" ClientSideOnSelect="onSearchDateChange" Value="4/1/2016"></ej:DatePicker>
                                    </div>
                                    <div class="searchdatepicker esearch">
                                        <ej:ToggleButton ClientIDMode="Static" ID="datesearch" runat="server" Type="Button" Size="Normal" Width="30px" Height="30px" ContentType="ImageOnly" DefaultPrefixIcon="icon-search" ActivePrefixIcon="icon-close datesearch" ClientSideOnClick="onDateSearch"></ej:ToggleButton>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="appointmentarea">
                        <div class="hospitalschedule">
                            <ej:Schedule ID="DoctorSchedule" runat="server" Width="100%" Height="100%" CellWidth="50px" Orientation="Horizontal" Views="day,week,month" CurrentView="Day" CurrentDate="4/1/2016" ShowCurrentTimeIndicator="false" ShowQuickWindow="false" StartHour="7" EndHour="23" TimeZone="UTC -08:00" ResourceHeaderTemplateId="#resTemplate" AppointmentTemplateId="#doctortemplate" AppointmentWindowOpen="onAppointmentWindowOpen" Navigation="OnNavigation" QueryCellInfo="onQueryCellInfo" ActionComplete="onCustomization">
                                <TooltipSettings Enable="true" TemplateId="#tooltipTemp" />
                                <Group Resources="Rooms,Owners" />
                                <Resources>
                                    <ej:Resources Field="RoomId" Name="Rooms" Title="Room" AllowMultiple="false">
                                        <ResourceSettings Color="Color" Id="Id" GroupId="GroupId" Text="Text">
                                        </ResourceSettings>
                                    </ej:Resources>
                                    <ej:Resources Field="OwnerId" Name="Owners" Title="Owner" AllowMultiple="true">
                                        <ResourceSettings Color="Color" Id="Id" GroupId="GroupId" Text="Text">
                                        </ResourceSettings>
                                    </ej:Resources>
                                </Resources>
                                <AppointmentSettings Id="Id" Subject="Subject" StartTime="StartTime" EndTime="EndTime" Description="Description" AllDay="AllDay" Recurrence="Recurrence" RecurrenceRule="RecurrenceRule" ResourceFields="RoomId,OwnerId" />
                            </ej:Schedule>
                        </div>
                    </div>
                </div>
                <div class="rightcol">
                    <div class="calendar">
                        <div class="calendarheader">
                            <div class="headertext" style="padding-top: 2px;">CALENDAR</div>
                        </div>
                        <div class="calendarcontent">
                            <ej:DatePicker ClientIDMode="Static" ID="datepicker" runat="server" TagName="div" Width="100%" Height="100%" ClientSideOnSelect="onSelected" ShowFooter="false" DisplayInline="true" Value="4/1/2016"></ej:DatePicker>
                        </div>
                    </div>
                    <div class="waitinglist">
                        <div class="waitinglistheader">
                            <div class="headertext">WAITING LIST</div>
                            <span class="headtitle">Drag and drop the below items</span>
                        </div>
                        <div class="waitinglistcontent">
                            <div class="waitingapplist">
                                <ul id="upcomming"></ul>
                            </div>
                        </div>
                        <div class="appointmentbtn">
                            <div class="groupbtn">
                                <div class="btnsht">
                                    <ej:Button ID="new" CssClass="add" ClientIDMode="Static" runat="server" Type="Button" Size="Normal" Text="New" ClientSideOnClick="onButtonClick" ShowRoundedCorner="true" Width="100%" />
                                </div>
                                <div class="btnsht">
                                    <ej:Button ID="delete" CssClass="delete" ClientIDMode="Static" runat="server" Type="Button" Size="Normal" Text="Delete" ClientSideOnClick="onButtonClick" ShowRoundedCorner="true" Width="100%" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--Appointment Window Dialog-->
        <div id="customWindow" style="display: none">
            <div id="appWindow" class="e-windowmargin">
                <div id="custom">
                    <div class="container-fluid">
                        <div class="row epadding" style="display: none;">
                            <div class="col-md-3">Id</div>
                            <div class="col-md-9">
                                <input id="customId" type="text" name="Id" />
                            </div>
                        </div>
                        <div class="row epadding">
                            <div class="col-md-2">Patient Name *</div>
                            <div class="col-md-7">
                                <input id="subject" type="text" value="" name="Subject" onfocus="temp()" style="width: 100%" />
                            </div>
                            <div class="col-md-2">
                                <ej:Button ClientIDMode="Static" ID="patientadd" runat="server" Type="Button" Text="New Patient" ClientSideOnClick="onPatientNew" Size="Normal" Width="100px"></ej:Button>
                            </div>
                        </div>
                        <div class="row epadding">
                            <div class="col-md-2">Reason</div>
                            <div class="col-md-10">
                                <textarea id="customdescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea>
                            </div>
                        </div>
                        <div class="row epadding">
                            <div class="col-md-2">From</div>
                            <div class="col-md-3">
                                <ej:DateTimePicker ClientIDMode="Static" ID="StartTime" runat="server" Width="150px">
                                    <DateTimePickerDrillDown Enabled="true" Interval="30" ShowMeridian="false" />
                                </ej:DateTimePicker>
                            </div>
                            <div class="col-md-2 col-md-offset-1">To</div>
                            <div class="col-md-3">
                                <ej:DateTimePicker ClientIDMode="Static" ID="EndTime" runat="server" Width="150px">
                                    <DateTimePickerDrillDown Enabled="true" Interval="30" ShowMeridian="false" />
                                </ej:DateTimePicker>
                            </div>
                        </div>
                        <div class="row epadding">
                            <div class="col-md-2">Department</div>
                            <div class="col-md-3">
                                <input type="text" id="Department" />
                            </div>
                            <div class="col-md-2 col-md-offset-1">Consultant</div>
                            <div class="col-md-3">
                                <input type="text" id="deptdoctors" />
                            </div>
                        </div>
                        <div class="row epadding">
                            <div class="col-md-2">Service</div>
                            <div class="col-md-3">
                                <ej:DropDownList ClientIDMode="Static" ID="Category" runat="server" Width="150px" SelectedIndex="0" DataTextField="Text">
                                </ej:DropDownList>
                            </div>
                            <div class="col-md-2 col-md-offset-1">Repeat</div>
                            <div class="col-md-2">
                                <ej:CheckBox ClientIDMode="Static" ID="recurrence" runat="server" Checked="false" Enabled="true" ClientSideOnChange="recurCheck"></ej:CheckBox>
                            </div>
                            <div class="col-md-1 e-recuredit" id="editApp" style="display: none;"><a class="recuredit" href="#" style="float: left; padding-left: 10px;">Edit</a></div>
                        </div>
                    </div>
                </div>
                <br />
                <div>
                    <button type="submit" id="appcancel">Cancel</button>
                    <button type="submit" id="appsubmit">Submit</button>
                </div>
            </div>
            <div id="recWindow" style="display: none">
                <div id="recurrenceEditor"></div>
                <br />
                <div>
                    <button type="submit" id="reccancel">Cancel</button>
                    <button type="submit" id="recsubmit">Submit</button>
                </div>
            </div>
        </div>
        <!--Patient Details Dialog-->
        <div id="patientWindow" style="display: none">
            <div id="patient">
                <table width="100%" cellpadding="5">
                    <tbody>
                        <tr>
                            <td style="text-align: right">ID</td>
                            <td colspan="2">
                                <input id="patientid" class="e-inputtext patientdetails" type="text" name="Id" readonly /></td>
                        </tr>
                        <tr>
                            <td style="text-align: right">Name</td>
                            <td colspan="2">
                                <input id="patientname" class="e-inputtext patientdetails" type="text" name="Name" onfocus="temp()" /></td>
                        </tr>
                        <tr>
                            <td style="text-align: right">Date of Birth</td>
                            <td colspan="2">
                                <ej:DatePicker ClientIDMode="Static" ID="patientdob" runat="server" CssClass="e-inputtext patientdetails" Width="170px" ClientSideOnFocusIn="temp"></ej:DatePicker></td>
                        </tr>
                        <tr>
                            <td style="text-align: right">Mobile</td>
                            <td colspan="2">
                                <input id="patientmobile" class="e-inputtext patientdetails" type="number" name="Mobile" onfocus="temp()" /></td>
                        </tr>
                        <tr>
                            <td style="text-align: right">Blood Group</td>
                            <td colspan="2">
                                <input id="patientbloodgroup" class="e-inputtext patientdetails" type="text" name="BloodGroup" /></td>
                        </tr>
                        <tr>
                            <td style="text-align: right">Address</td>
                            <td colspan="2">
                                <textarea id="patientaddress" class="e-inputtext patientdetails" type="text" width="100%" name="Address" onfocus="temp()"></textarea></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="padding-top: 10px;">
                <button type="submit" id="patientcancel" class="pcancel">Cancel</button>
                <button type="submit" id="patientsave" class="padd">Submit</button>
            </div>
        </div>
        <!--Delete Appointment Dialog-->
        <div id="deleteWindow" style="display: none">
            <table width="100%" cellpadding="5">
                <tbody>
                    <tr style="padding: 10px;">
                        <td style="padding: 10px;">Appointment Id:</td>
                        <td colspan="2">
                            <input id="deleteId" type="text" name="Id" /></td>
                    </tr>
                </tbody>
            </table>
            <div style="height: 35px;">
                <button type="submit" onclick="cancel()" id="btncancel">Cancel</button>
                <button type="submit" onclick="done()" id="btnsubmit">Submit</button>
            </div>
        </div>
        <!--Delete Alert Dialog-->
        <div id="alertWindow" style="display: none">
            <span>Are you sure want to delete this appointment?</span>
            <div style="height: 35px; padding-top: 12px;">
                <button type="submit" class="alertcancel" id="alertcancel">Cancel</button>
                <button type="submit" class="alertdone" id="alertok">Ok</button>
            </div>
        </div>
        <!--Appointment Token Dialog-->
        <div id="tokenWindow" style="display: none">
            <div id="token">
                <table width="100%" cellpadding="5">
                    <tbody>
                        <tr>
                            <td id="apptoken" class="textlabel">Your Appointment Id:
                                <label id="lbltext"></label>
                            </td>
                            <td id="appstatus" class="textlabel" style="display: none;">Appointment Booked</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="padding-top: 10px;">
                <button type="submit" onclick="cancel()" id="btnok">Ok</button>
            </div>
        </div>
        <!-- Waitinglist Tooltip -->
        <div id='waitinglisttooltip' style="display: none;">
            <div style='padding: 2px;'><span class='temphead'>Doctor Name: </span><span id="docname" class='temp'></span></div>
            <div style='padding: 2px;'><span class='temphead'>StartTime: </span><span id="docstarttime" class='temp'></span></div>
            <div style='padding: 2px;'><span class='temphead'>EndTime: </span><span id="docendtime" class='temp'></span></div>
        </div>

        <!-- Resource Header Template -->
        <script id="resTemplate" type="text/x-jsrender">
        <div style="height:100%">
            {{if classname == 'e-childnode' && Text != "GENERAL" && Text != "DENTAL"}}
            {{:~resimages(Id)}}<div style="overflow:hidden;text-overflow:ellipsis;">{{:Name}}</div>
            {{else}}
            <div style="overflow:hidden;text-overflow:ellipsis;">{{:Name}}</div>
            {{/if}}
        </div>
        </script>
        <!-- Appointment Template -->
        <script id="appointtemplate" type="text/x-jsrender">
        <div style="height:100%;background:{{:~appbgm(Category)}}">
            <div style="width:20px;height:100%;float:left;text-align:center;font-weight:bolder;background-color:{{:~appcolor(Category)}};line-height:{{:~lineheight(StartTime, EndTime)}}">{{:AppTaskId}}</div>
            <div style='float:left; width:50px;'>{{:~appoint(OwnerId)}}</div>
            <div style="float:left; margin-left:5px;">
                <div id="appsubject">Patient Name: {{:Subject}}</div>
                <div id="apptime">{{:~apptime(StartTime, EndTime)}}</div>
            </div>
        </div>
        </script>
        <script id="doctortemplate" type="text/x-jsrender">
        <div style="width:100%;height:100%;background:{{:~appbgm(Category)}}">
            <div style="width:30px;height:100%;float:left;text-align:center;font-weight:bolder;background-color:{{:~appcolor(Category)}};line-height:30px">{{:AppTaskId}}</div>
            <div style="margin-left:5px;float:left;width:65%;height:100%;">
                <div id="appsubject">{{:Subject}} - {{:~doctor(Category)}}</div>
                <div id="apptime">{{:~apptime(StartTime, EndTime)}}</div>
            </div>
            <div class='icon-{{:Category}}' style='float:right;width:15%;height:100%;padding-top:7px;'></div>
        </div>
        </script>
        <!-- Appointment Tooltip -->
        <script id="tooltipTemp" type="text/x-jsrender">
        <div id="tooltip" style="width:250px;">
           <div style='float:left;width:80%;height:100%;padding-left:10px;padding-bottom:5px;'>
                <div style="padding:2px;"><span class="temphead">Reason: </span><span class="temp">{{:Description}}</span></div>
                <div style="padding:2px;"><span class="temphead">From: </span><span class="temp">{{:StartTime.toLocaleString()}}</span></div>
                <div style="padding:2px;"><span class="temphead">To: </span><span class="temp">{{:EndTime.toLocaleString()}}</span></div>
           </div>
           <div style='float:left;width:20%;height:100%;padding-top:5px;'>{{:~format(OwnerId,"image")}}</div>
        </div>
        </script>
        <script type="text/javascript">
            window.categorylist = ej.parseJSON(categorylist);
            window.doctorName = ej.parseJSON(doctors);
            window.departmentName = ej.parseJSON(departments);
            window.waitinglist = ej.parseJSON(waitinglist);
            window.patientlist = ej.parseJSON(patientlist);
            window.list = window.addlist = window.appedit = window.mediaQuery = window.drop = window.waitinglistedit = false;
            ej.Schedule.Locale["en-US"] = { Resources: "DOCTORS" };
        </script>
        <script src="../Scripts/Dashboard/appointmentplanner.js"></script>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebSampleBrowser.Dashboard
{
    public partial class AppointmentPlanner : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Datasource for departments
            List<Rooms> departments = new List<Rooms>();
            departments.Add(new Rooms { Name = "GENERAL", Text = "GENERAL", Id = 1, GroupId = 10, Color = "#C3DAF1" });
            departments.Add(new Rooms { Name = "DENTAL", Text = "DENTAL", Id = 2, GroupId = 10, Color = "#FBDBD8" });

            //Datasource for doctors
            List<Rooms> doctors = new List<Rooms>();
            doctors.Add(new Rooms { Name = "John Xavier", Text = "JohnXavier", Id = 1, GroupId = 1, Color = "#cb6bb2", Designation = "Cardiologist", Value = "cardiologist" });
            doctors.Add(new Rooms { Name = "Annie", Text = "Annie", Id = 2, GroupId = 2, Color = "#56ca85", Designation = "Oncologist", Value = "oncologist" });
            doctors.Add(new Rooms { Name = "Paul", Text = "Paul", Id = 3, GroupId = 1, Color = "#cb6bb2", Designation = "Ophthalmologist", Value = "ophthalmologist" });
            doctors.Add(new Rooms { Name = "Helen", Text = "Helen", Id = 4, GroupId = 2, Color = "#56ca85", Designation = "Orthopedic", Value = "orthopedic" });
            doctors.Add(new Rooms { Name = "Smith", Text = "Smith", Id = 5, GroupId = 1, Color = "#cb6bb2", Designation = "Neurologist", Value = "neurologist" });
            doctors.Add(new Rooms { Name = "George", Text = "George", Id = 6, GroupId = 2, Color = "#56ca85", Designation = "Child Specialist", Value = "childspecialist" });
            doctors.Add(new Rooms { Name = "Benita", Text = "Benita", Id = 7, GroupId = 1, Color = "#cb6bb2", Designation = "Dermatologist", Value = "dermatologist" });

            //Datasource for catagory
            List<Categories> categorylist = new List<Categories>();
            categorylist.Add(new Categories { Text = "Consulting", Value = "consulting", Color = "#9578b3" });
            categorylist.Add(new Categories { Text = "Check up", Value = "checkup", Color = "#64b7a0" });
            categorylist.Add(new Categories { Text = "Extraction", Value = "extraction", Color = "#c95d5d" });
            categorylist.Add(new Categories { Text = "Observation", Value = "observation", Color = "#8196a7" });
            categorylist.Add(new Categories { Text = "Surgery", Value = "surgery", Color = "#6a8fcb" });
            categorylist.Add(new Categories { Text = "Therapy", Value = "therapy", Color = "#5B7D38" });
            Category.DataSource = categorylist;

            //Datasource for appointments
            List<Appointmennts> hospitaldata = new List<Appointmennts>();
            hospitaldata.Add(new Appointmennts { Id = 1, Subject = "David", StartTime = new DateTime(2016, 4, 1, 15, 0, 0), EndTime = new DateTime(2016, 4, 1, 17, 0, 0), Description = "Health Checkup", AllDay = false, Recurrence = false, RoomId = 1, OwnerId = 1, Category = "consulting" });
            hospitaldata.Add(new Appointmennts { Id = 2, Subject = "John", StartTime = new DateTime(2016, 4, 1, 16, 30, 0), EndTime = new DateTime(2016, 4, 1, 18, 30, 0), Description = "Monthly Treatment", AllDay = false, Recurrence = false, RoomId = 2, OwnerId = 2, Category = "checkup" });
            hospitaldata.Add(new Appointmennts { Id = 3, Subject = "Peter", StartTime = new DateTime(2016, 4, 1, 19, 0, 0), EndTime = new DateTime(2016, 4, 1, 21, 0, 0), Description = "Eye and Spectacles Checkup", AllDay = false, Recurrence = false, RoomId = 1, OwnerId = 3, Category = "extraction" });
            hospitaldata.Add(new Appointmennts { Id = 4, Subject = "Starc", StartTime = new DateTime(2016, 4, 1, 19, 0, 0), EndTime = new DateTime(2016, 4, 1, 21, 0, 0), Description = "Bone and Health Checkup ", AllDay = false, Recurrence = false, RoomId = 2, OwnerId = 4, Category = "observation" });
            hospitaldata.Add(new Appointmennts { Id = 5, Subject = "James", StartTime = new DateTime(2016, 4, 1, 22, 0, 0), EndTime = new DateTime(2016, 4, 2, 0, 0, 0), Description = "Surgery Appointment", AllDay = false, Recurrence = false, RoomId = 1, OwnerId = 5, Category = "therapy" });
            hospitaldata.Add(new Appointmennts { Id = 6, Subject = "Jercy", StartTime = new DateTime(2016, 4, 1, 21, 30, 0), EndTime = new DateTime(2016, 4, 1, 23, 30, 0), Description = "Monthly Checkup for baby", AllDay = false, Recurrence = false, RoomId = 2, OwnerId = 6, Category = "surgery" });
            hospitaldata.Add(new Appointmennts { Id = 7, Subject = "Albert", StartTime = new DateTime(2016, 4, 2, 0, 0, 0), EndTime = new DateTime(2016, 4, 2, 2, 30, 0), Description = "Skin care treatment", AllDay = false, Recurrence = true, RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10", RoomId = 1, OwnerId = 7, Category = "extraction" });
            hospitaldata.Add(new Appointmennts { Id = 8, Subject = "David", StartTime = new DateTime(2016, 4, 2, 16, 30, 0), EndTime = new DateTime(2016, 4, 2, 18, 15, 0), Description = "Eye checkup and Treatment", AllDay = false, Recurrence = false, RoomId = 1, OwnerId = 1, Category = "consulting" });
            hospitaldata.Add(new Appointmennts { Id = 9, Subject = "John", StartTime = new DateTime(2016, 4, 2, 19, 30, 0), EndTime = new DateTime(2016, 4, 2, 21, 45, 0), Description = "Skin Checkup and Treatment", AllDay = false, Recurrence = false, RoomId = 2, OwnerId = 2, Category = "checkup" });
            hospitaldata.Add(new Appointmennts { Id = 10, Subject = "Peter", StartTime = new DateTime(2016, 4, 3, 17, 30, 0), EndTime = new DateTime(2016, 4, 3, 19, 30, 0), Description = "Surgery Treatment", AllDay = false, Recurrence = false, RoomId = 1, OwnerId = 3, Category = "extraction" });

            //Datasource for waiting list
            List<Appointmennts> waitinglist = new List<Appointmennts>();
            waitinglist.Add(new Appointmennts { Id = 11, Subject = "Steven", StartTime = new DateTime(2016, 4, 3, 7, 30, 0), EndTime = new DateTime(2016, 4, 3, 9, 30, 0), Description = "Master Checkup", AllDay = false, Recurrence = false, RoomId = 1, OwnerId = 1, Department = "GENERAL", Category = "consulting", Categorycolor = "#9A32CD" });
            waitinglist.Add(new Appointmennts { Id = 12, Subject = "Milan", StartTime = new DateTime(2016, 4, 4, 8, 30, 0), EndTime = new DateTime(2016, 4, 4, 10, 30, 0), Description = "Master Checkup", AllDay = false, Recurrence = false, RoomId = 2, OwnerId = 2, Department = "DENTAL", Category = "checkup", Categorycolor = "#458B74" });
            waitinglist.Add(new Appointmennts { Id = 13, Subject = "Laura", StartTime = new DateTime(2016, 4, 4, 9, 30, 0), EndTime = new DateTime(2016, 4, 4, 10, 30, 0), Description = "Master Checkup", AllDay = false, Recurrence = false, RoomId = 1, OwnerId = 3, Department = "GENERAL", Category = "extraction", Categorycolor = "#CD2626" });
            waitinglist.Add(new Appointmennts { Id = 14, Subject = "Janet", StartTime = new DateTime(2016, 4, 3, 11, 0, 0), EndTime = new DateTime(2016, 4, 3, 12, 30, 0), Description = "Master Checkup", AllDay = false, Recurrence = false, RoomId = 2, OwnerId = 4, Department = "DENTAL", Category = "observation", Categorycolor = "#5F9EA0" });

            //Datasource for patients
            List<Patients> patientlist = new List<Patients>();
            patientlist.Add(new Patients { Id = 1, Name = "David", DOB = new DateTime(1991, 5, 29), Mobile = 9897969594, BloodGroup = "A+", Address = "Canada" });
            patientlist.Add(new Patients { Id = 2, Name = "John", DOB = new DateTime(1991, 8, 6), Mobile = 9897969594, BloodGroup = "A-", Address = "Canada" });
            patientlist.Add(new Patients { Id = 3, Name = "Peter", DOB = new DateTime(1991, 10, 10), Mobile = 9897969594, BloodGroup = "AB+", Address = "Canada" });
            patientlist.Add(new Patients { Id = 4, Name = "Starc", DOB = new DateTime(1991, 10, 30), Mobile = 9897969594, BloodGroup = "AB-", Address = "Canada" });
            patientlist.Add(new Patients { Id = 5, Name = "James", DOB = new DateTime(1991, 10, 26), Mobile = 9897969594, BloodGroup = "O+", Address = "Canada" });
            patientlist.Add(new Patients { Id = 6, Name = "Jercy", DOB = new DateTime(1991, 7, 18), Mobile = 9897969594, BloodGroup = "O+", Address = "Canada" });
            patientlist.Add(new Patients { Id = 7, Name = "Albret", DOB = new DateTime(1991, 1, 4), Mobile = 9897969594, BloodGroup = "O+", Address = "Canada" });
            patientlist.Add(new Patients { Id = 8, Name = "Robert", DOB = new DateTime(1991, 10, 29), Mobile = 9897969594, BloodGroup = "A-", Address = "Canada" });
            patientlist.Add(new Patients { Id = 9, Name = "Louis", DOB = new DateTime(1991, 7, 17), Mobile = 9897969594, BloodGroup = "A-", Address = "Canada" });
            patientlist.Add(new Patients { Id = 10, Name = "Williams", DOB = new DateTime(1991, 5, 25), Mobile = 9897969594, BloodGroup = "A+", Address = "Canada" });

            DoctorSchedule.Resources[0].ResourceSettings.DataSource = departments;
            DoctorSchedule.Resources[1].ResourceSettings.DataSource = doctors;
            DoctorSchedule.AppointmentSettings.DataSource = hospitaldata;

            JavaScriptSerializer jsSerialize = new JavaScriptSerializer();
            StringBuilder strScript = new StringBuilder();
            strScript.Append("<script type=\"text/javascript\">");
            strScript.Append("var departments='" + jsSerialize.Serialize(departments) + "';");
            strScript.Append("var doctors='" + jsSerialize.Serialize(doctors) + "';");
            strScript.Append("var categorylist='" + jsSerialize.Serialize(categorylist) + "';");
            strScript.Append("var waitinglist='" + jsSerialize.Serialize(waitinglist) + "';");
            strScript.Append("var patientlist='" + jsSerialize.Serialize(patientlist) + "';");
            strScript.Append("</script>");
            ClientScriptManager script = Page.ClientScript;
            if (!script.IsClientScriptBlockRegistered(this.GetType(), "Var"))
            {
                script.RegisterClientScriptBlock(this.GetType(), "Var", strScript.ToString());
            }
        }

        private class Categories
        {
            public string Text { get; set; }
            public string Value { get; set; }
            public string Color { get; set; }
        }

        private class Rooms
        {
            public string Name { get; set; }
            public string Text { set; get; }
            public int Id { set; get; }
            public int GroupId { set; get; }
            public string Color { set; get; }
            public string Designation { get; set; }
            public string Value { get; set; }
        }

        private class Appointmennts
        {
            public int Id { get; set; }
            public string Subject { get; set; }
            public DateTime StartTime { get; set; }
            public DateTime EndTime { get; set; }
            public string Description { get; set; }
            public Boolean AllDay { get; set; }
            public Boolean Recurrence { get; set; }
            public string RecurrenceRule { get; set; }
            public int RoomId { get; set; }
            public int OwnerId { get; set; }
            public string Category { get; set; }
            public string Categorycolor { get; set; }
            public string Department { get; set; }
        }

        public class Patients
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public DateTime DOB { get; set; }
            public long Mobile { get; set; }
            public string BloodGroup { get; set; }
            public string Address { get; set; }
        }
    }
}