Category / Section
How to mirror the appointments of one Schedule to another?
1 min read
The following steps helps you to mirror the appointments of first Schedule into second Schedule.
Step1: Create an ASP.NET application and include the EJWEB Schedule control in it by referring to this link.
Step2: Create a database table with the necessary fields as follows.
[SQL Table Script]
CREATE TABLE [dbo].[ScheduleAppointments] ( [Id] INT NOT NULL, [Subject] NVARCHAR (100) NULL, [Location] NVARCHAR (1000) NULL, [StartTime] DATETIME NULL, [EndTime] DATETIME NULL, [AllDay] BIT NULL, [Recurrence] BIT NULL, [RecurrenceRule] NVARCHAR (100) NULL, [StartTimeZone] NVARCHAR (50) NULL, [EndTimeZone] NVARCHAR (50) NULL, [Categorize] NVARCHAR (50) NULL, CONSTRAINT [PK_ScheduleAppointments] PRIMARY KEY CLUSTERED ([Id] ASC) );
Note: You can create the table in Visual Studio itself as a local database or use SQL Server Management Studio.
Step3: Connect database to the Schedule control by using SqlDataSource ASP.NET control as shown below.
[Default.aspx]
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <ej:Schedule ID="Schedule3" runat="server" DataSourceID="SqlDataSource1"> </ej:Schedule> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [ScheduleAppointments]"></asp:SqlDataSource> </asp:Content>
Step 4: Add the connectionString configuration to the Web.Config page as highlighted in the following code.
[Web.Config]
<configuration> -------------- -------------- <connectionStrings> <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-ScheduleCRUDCS-20150607072453.mdf;Initial Catalog=aspnet-ScheduleCRUDCS-20150607072453;Integrated Security=True" providerName="System.Data.SqlClient" /> <add name="ConnectionString" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\ScheduleData.mdf;Integrated Security=True" providerName="System.Data.SqlClient" /> </connectionStrings> ------------ ------------ </configuration>
Note: Change the ConnectionString value based on your database connection. Here, it is mentioned as the “local database” connection string.
Step 5: Make use of the following server-side events of the Schedule control to perform the CRUD operation. Here, each event is assigned a server-side method name to be invoked at the time of a particular action.
[Default.aspx]
<ej:Schedule ID="Schedule1" ClientIDMode="Static" runat="server" Height="525px" Width="100%" CurrentDate="10/6/2015" Create="onCreate" Navigation="OnNavigation" OnServerBeforeAppointmentCreate="Schedule1_ServerAppointmentSaved" OnServerBeforeAppointmentChange="Schedule1_ServerAppointmentEdited" OnServerBeforeAppointmentRemove="Schedule1_ServerAppointmentDeleted" OnServerDragStop="Schedule1_ServerDragStop" OnServerResizeStop="Schedule1_ServerResizeStop" DataSourceID="SqlDataSource1"> <AppointmentSettings Id="Id" Subject="Subject" AllDay="AllDay" StartTime="StartTime" EndTime="EndTime" Location="Location" StartTimeZone="StartTimeZone" EndTimeZone="EndTimeZone" Recurrence="Recurrence" RecurrenceRule="RecurrenceRule" /> </ej:Schedule>
Step 6: Render another Scheduler (depicted with the id Schedule2) in the same page as shown in the below code example.
[Default.aspx]
<ej:Schedule ID="Schedule1" ClientIDMode="Static" runat="server" Height="525px" Width="100%" CurrentDate="10/6/2015" Create="onCreate" Navigation="OnNavigation" OnServerBeforeAppointmentCreate="Schedule1_ServerAppointmentSaved" OnServerBeforeAppointmentChange="Schedule1_ServerAppointmentEdited" OnServerBeforeAppointmentRemove="Schedule1_ServerAppointmentDeleted" OnServerDragStop="Schedule1_ServerDragStop" OnServerResizeStop="Schedule1_ServerResizeStop" DataSourceID="SqlDataSource1"> <AppointmentSettings Id="Id" Subject="Subject" AllDay="AllDay" StartTime="StartTime" EndTime="EndTime" Location="Location" StartTimeZone="StartTimeZone" EndTimeZone="EndTimeZone" Recurrence="Recurrence" RecurrenceRule="RecurrenceRule" /> </ej:Schedule> <ej:Schedule ID="Schedule2" ClientIDMode="Static" runat="server" Height="525px" Width="100%" ReadOnly="true" CurrentDate="10/6/2015" DataSourceID="SqlDataSource1"> <AppointmentSettings Id="Id" Subject="Subject" AllDay="AllDay" StartTime="StartTime" EndTime="EndTime" StartTimeZone="StartTimeZone" EndTimeZone="EndTimeZone" Location="Location" Recurrence="Recurrence" RecurrenceRule="RecurrenceRule" /> </ej:Schedule>
Step 7: Make use of the server-side event Navigation in Schedule1 and assign the method name (onNavigation) to it which gets invoked on every time the scheduler date or view is navigated back and forth. Within this method, assign the current view and date range of the first Scheduler to the second Scheduler (which acts as a mirror Schedule) as shown in the below code example.
[Default.aspx]
function OnNavigation(args) { // this event function will be called when the view or date of first Scheduler is navigated
var date = args.currentDate; //current date of First schedule will be stored here
var view = args.currentView;//current view of First schedule will be stored here
var schObj2 = $("#Schedule2").data("ejSchedule"); // here creating the object for Second Schedule
if (args.currentView != "agenda")
schObj2.model.currentDate = new Date(date); // assigning the current date to the mirror schedule
schObj2.model.currentView = args.currentView; // assigning the current view to the mirror schedule
schObj2.refresh(); // here we are refreshing the mirror schedule
}
Step 8: Define the server-side methods with appropriate code blocks to connect the dataSource to both the Scheduler as shown in the below code-behind page example.
[Default.aspx.cs]
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;
using ScheduleCRUDCS.Models;
namespace ScheduleCRUDCS
{
public partial class _Default : Page
{
ScheduleDataDataContext db = new ScheduleDataDataContext();
static string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
//change your database name and server name
SqlConnection conn = new SqlConnection(connectionString);
DataSet drugs = new DataSet();
SqlDataAdapter adapter1 = new SqlDataAdapter();
string sql = null;
string locationValue = "";
string recurrenceValue = "";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Schedule1.AppointmentSettings.DataSource = db.ScheduleAppointments.Take(100).ToList();
}
}
//The following block of codes used to display the appointments after the add/edit/delete the appointments
private void BindAppointments()
{
// here we are assigning the updated data source to first and second Schedule
Schedule1.AppointmentSettings.DataSource = db.ScheduleAppointments.Take(100).ToList();
Schedule2.AppointmentSettings.DataSource = db.ScheduleAppointments.Take(100).ToList();
}
private Dictionary<string, object> m_Arguments;
public Dictionary<string, object> Arguments
{
get { return m_Arguments; }
set { m_Arguments = value; }
}
//The following block of codes will trigger and perform the storing appointments details after the add/saving the appointments
protected void Schedule1_ServerAppointmentSaved(object sender, Syncfusion.JavaScript.Web.ScheduleEventArgs e)
{
Arguments = e.Arguments["appointment"] as Dictionary<string, object>;
var list = Arguments as Dictionary<string, object>;
sql = "Select Id from ScheduleAppointments Where Id='" + list["Id"].ToString() + "'";
adapter1.SelectCommand = new SqlCommand(sql, conn);
adapter1.Fill(drugs);
locationValue = list.ContainsKey("Location") == false ? null : list["Location"].ToString();
recurrenceValue = list["Recurrence"].ToString() == "True" ? list["RecurrenceRule"].ToString() : null;
if (drugs.Tables[0].Rows.Count == 0)
{
conn.Open();
sql = "insert into ScheduleAppointments (Id,EndTime,Recurrence,StartTime,Subject,AllDay,Categorize,Location,RecurrenceRule) values(" + list["Id"].ToString() + ",'" + Convert.ToDateTime(list["EndTime"]).ToUniversalTime().ToString() + "','" + list["Recurrence"].ToString() + "','" + Convert.ToDateTime(list["StartTime"]).ToUniversalTime().ToString() + "','" + list["Subject"].ToString() + "','" + list["AllDay"].ToString() + "','" + "','" + locationValue + "','" + recurrenceValue + "')";
adapter1.InsertCommand = new SqlCommand(sql, conn);
adapter1.InsertCommand.ExecuteNonQuery();
conn.Close();
}
BindAppointments();
}
//The following block of codes will trigger and perform the storing appointments details after the editing/modify the appointments
protected void Schedule1_ServerAppointmentEdited(object sender, Syncfusion.JavaScript.Web.ScheduleEventArgs e)
{
Arguments = e.Arguments["appointment"] as Dictionary<string, object>;
var list = Arguments as Dictionary<string, object>;
conn.Open();
locationValue = list.ContainsKey("Location") == false ? null : list["Location"].ToString();
recurrenceValue = list["Recurrence"].ToString() == "True" ? list["RecurrenceRule"].ToString() : null;
sql = "update ScheduleAppointments set EndTime='" + Convert.ToDateTime(list["EndTime"]).ToUniversalTime().ToString() + "',Recurrence='" + list["Recurrence"].ToString() + "',StartTime='" + Convert.ToDateTime(list["StartTime"]).ToUniversalTime().ToString() + "',Subject='" + list["Subject"] + "',AllDay='" + list["AllDay"].ToString() + "',Location='" + locationValue + "',RecurrenceRule='" + recurrenceValue + "'where Id='" + list["Id"].ToString() + "'";
adapter1.UpdateCommand = new SqlCommand(sql, conn);
adapter1.UpdateCommand.ExecuteNonQuery();
conn.Close();
BindAppointments();
}
//The following block of codes will trigger and perform the deleting appointments details after deleting the appointment
protected void Schedule1_ServerAppointmentDeleted(object sender, Syncfusion.JavaScript.Web.ScheduleEventArgs e)
{
var Arguments1 = (System.Collections.ArrayList)e.Arguments["appointment"];
var delList = (Dictionary<String, Object>)Arguments1[0];
conn.Open();
sql = "Delete ScheduleAppointments Where Id='" + delList["Id"].ToString() + "'";
adapter1.DeleteCommand = new SqlCommand(sql, conn);
adapter1.DeleteCommand.ExecuteNonQuery();
conn.Close();
BindAppointments();
}
//The following block of codes will trigger and perform the update appointments details after drag and drop the appointment
protected void Schedule1_ServerDragStop(object sender, Syncfusion.JavaScript.Web.ScheduleEventArgs e)
{
Arguments = e.Arguments["appointment"] as Dictionary<string, object>;
var list = Arguments as Dictionary<string, object>;
conn.Open();
locationValue = list.ContainsKey("Location") == false ? null : list["Location"].ToString();
recurrenceValue = list["Recurrence"].ToString() == "True" ? list["RecurrenceRule"].ToString() : null;
sql = "update ScheduleAppointments set EndTime='" + Convert.ToDateTime(list["EndTime"]).ToUniversalTime().ToString() + "',Recurrence='" + list["Recurrence"].ToString() + "',StartTime='" + Convert.ToDateTime(list["StartTime"]).ToUniversalTime().ToString() + "',Subject='" + list["Subject"] + "',AllDay='" + list["AllDay"].ToString() + "',Location='" + locationValue + "',RecurrenceRule='" + recurrenceValue + "'where Id='" + list["Id"].ToString() + "'";
adapter1.UpdateCommand = new SqlCommand(sql, conn);
adapter1.UpdateCommand.ExecuteNonQuery();
conn.Close();
BindAppointments();
}
//The following block of codes will trigger and perform the update appointments details after resizing the appointment
protected void Schedule1_ServerResizeStop(object sender, Syncfusion.JavaScript.Web.ScheduleEventArgs e)
{
Arguments = e.Arguments["appointment"] as Dictionary<string, object>;
var list = Arguments as Dictionary<string, object>;
conn.Open();
locationValue = list.ContainsKey("Location") == false ? null : list["Location"].ToString();
recurrenceValue = list["Recurrence"].ToString() == "True" ? list["RecurrenceRule"].ToString() : null;
sql = "update ScheduleAppointments set EndTime='" + Convert.ToDateTime(list["EndTime"]).ToUniversalTime().ToString() + "',Recurrence='" + list["Recurrence"].ToString() + "',StartTime='" + Convert.ToDateTime(list["StartTime"]).ToUniversalTime().ToString() + "',Subject='" + list["Subject"] + "',AllDay='" + list["AllDay"].ToString() + "',Categorize='" + "',Location='" + locationValue + "',RecurrenceRule='" + recurrenceValue + "'where Id='" + list["Id"].ToString() + "'";
adapter1.UpdateCommand = new SqlCommand(sql, conn);
adapter1.UpdateCommand.ExecuteNonQuery();
conn.Close();
BindAppointments();
}
}
}
Step 9: Run the sample. Now, you can perform insert, edit, and delete operations on the schedule appointments that simultaneously reflects in the SQL database as well as in the second Scheduler (Mirror Schedule).
Sample Link: http://www.syncfusion.com/downloads/support/directtrac/154576/ze/Mirror_schedule-383007832
