This is a migrated thread and some comments may be shown as answers.

button in scheduler

5 Answers 193 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Yannick asked on 19 Jul 2012, 12:52 PM

There is my code :

<%@ Page Language="VB" AutoEventWireup="true" CodeBehind="RadSchedulerWebForm.aspx.vb" Inherits="digiCONTACTSWebApp.RadSchedulerWebForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style>

#scheduler-container {

width: 700px;

float: left;

}

#settings-container {

float: right;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Transparent">

</telerik:RadSkinManager>

<script type="text/javascript">

var categoryNames = new Array();

function ClientNodeChecked(sender, eventArgs) {

SchedulerID = eventArgs.get_node().get_value();

var scheduler = $find('<%=RadScheduler1.ClientID %>');

scheduler.rebind();

}

/* function OnClientAppointmentsPopulating(sender, eventArgs) {

eventArgs.get_schedulerInfo().SchedulerID = SchedulerID;

}*/

function OnClientAppointmentsPopulating(sender, eventArgs) {

addSelectedCategoriesToArray(categoryNames);

eventArgs.get_schedulerInfo().CategoryNames = categoryNames.toString();

categoryNames = new Array(); //clear the array

}

function OnClientAppointmentDataBound(sender, eventArgs) {

var app = eventArgs.get_appointment();

//debugger;

var backColor = app.get_attributes().getAttribute("AppointmentCssColor");

if (backColor)

app.set_cssClass(backColor);

// app.set_backColor("yellow");

// app.set_cssClass("rsCategoryYellow");

}

function addSelectedCategoriesToArray(categoryNamesArray) {

var $ = $telerik.$;

var categoryPanelBar = $find('<%=RadPanelBar1.ClientID %>');

$(':checkbox:checked', categoryPanelBar.get_element()).each(function () {

categoryNames.push($(this).attr('id'));

});

}

function rebindScheduler() {

var scheduler = $find('<%=RadScheduler1.ClientID %>');

scheduler.rebind();

}

</script>

<div id="settings-container">

<telerik:RadPanelBar ID="RadPanelBar1" Runat="server">

</telerik:RadPanelBar>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:vicidialConnectionString4 %>"

ProviderName="<%$ ConnectionStrings:vicidialConnectionString4.ProviderName %>"

SelectCommand="SELECT lead_id, status, `user`, source_id, list_id, phone_number, first_name, last_name, address1, city, postal_code, alt_phone, comments FROM vicidial_list">

</asp:SqlDataSource>

</div>

<div id="scheduler-container">

<telerik:RadScheduler ID="RadScheduler1" runat="server"

OnClientAppointmentsPopulating="OnClientAppointmentsPopulating" SelectedView="WeekView"

Width="1000px" Height="600px" Skin="Transparent" Culture="fr-FR"

onclientappointmentdatabound="OnClientAppointmentDataBound"

EnableCustomAttributeEditing="True" StartInsertingInAdvancedForm="True"

SelectedDate="07/13/2012 08:54:36">

<AdvancedForm EnableCustomAttributeEditing="True" Modal="True" />

<Localization AdvancedCalendarCancel="Annuler" AdvancedDay="Jour"

AdvancedMaskDay="Jour" HeaderDay="Jour" HeaderMonth="Mois"

HeaderToday="Aujourd'hui" HeaderWeek="Semaine" />

<WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />

</telerik:RadScheduler>

</div>

</form>

</body>

</html>

I want to know if it was possible to add a button in the editing of my appointment.
I save and cancel button and I would like to add a third button.
are what is possible? and if so how?
Thank you in advance.

5 Answers, 1 is accepted

answered on 23 Jul 2012, 05:35 AM

Hi Yannick,

Following is the sample code which illustrates how to add InlineEditTemplate and AdvancedEditTemplate in a RadScheduler.

ASPX:

<telerik:RadScheduler runat="server" ID="RadScheduler1" .....>

.......

<%--For adding InlineEditTemplate --%>

<InlineEditTemplate>

<asp:TextBox ID="TitleTextBox" runat="server" Text='<%# Bind("Subject") %>' Width="90%" TextMode="MultiLine" Height="20px">

</asp:TextBox>

<asp:LinkButton ID="InsertButton" runat="server" CommandName="Update">

<asp:Image runat="server" ID="insertImage" ImageUrl="Images/ok.png" AlternateText="update" />

</asp:LinkButton>

<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel">

<asp:Image runat="server" ID="Image3" ImageUrl="Images/cancel.png" AlternateText="cancel" />

</asp:LinkButton>

<asp:LinkButton ID="InsertMoreButton" runat="server" CommandName="More" CssClass="rsAdvancedEditLink">Advanced</asp:LinkButton>

..............

<%--Add your own template here...--%>

..............

</InlineEditTemplate>

<%--For adding AdvancedEditTemplate --%>

<AdvancedEditTemplate>

<asp:Label AssociatedControlID="TitleTextBox" runat="server" CssClass="inline-label">Description</asp:Label>

<asp:TextBox ID="TitleTextBox" Rows="5" Columns="20" runat="server" Text='<%# Bind("Subject") %>' Width="97%" TextMode="MultiLine">

</asp:TextBox>

<br />

<asp:Label AssociatedControlID="StartInput" runat="server" CssClass="inline-label">Start time:</asp:Label>

<telerik:RadDateInput ID="StartInput" SelectedDate='<%# Bind("Start") %>' runat="server" _EnableOldBoxModel="true" EnableSingleInputRendering="false" >

</telerik:RadDateInput>

<br />

<asp:Label AssociatedControlID="EndInput" runat="server" CssClass="inline-label">End time:</asp:Label>

<telerik:RadDateInput ID="EndInput" SelectedDate='<%# Bind("End") %>' runat="server" EnableSingleInputRendering="false">

</telerik:RadDateInput>

<br />

..............

<%--Add your own template here...--%>

..............

</AdvancedEditTemplate>

......

</telerik:RadScheduler>

Hope this helps.

Regards,
Princy.

answered on 27 Jul 2012, 09:47 AM

There is my MyDbSchedulerProvider.vb

Imports System

Imports System.Collections.Generic

Imports System.Data.Common

Imports MySql.Data.MySqlClient

Imports Telerik.Web.UI

Public Class MyDbSchedulerProvider

Inherits DbSchedulerProviderBase

Private _schedulers As IDictionary(Of Integer, Resource)

Private _students As IDictionary(Of Integer, Resource)

Private ReadOnly Property Schedulers() As IDictionary(Of Integer, Resource)

Get

If _schedulers Is Nothing Then

_schedulers = New Dictionary(Of Integer, Resource)()

For Each scheduler As Resource In LoadSchedulers()

_schedulers.Add(CInt(scheduler.Key), scheduler)

Next

End If

Return _schedulers

End Get

End Property

Private ReadOnly Property Students() As IDictionary(Of Integer, Resource)

Get

_students = New Dictionary(Of Integer, Resource)()

For Each student As Resource In LoadStudents()

_students.Add(CInt(student.Key), student)

Next

Return _students

End Get

End Property

Public Overrides Function GetAppointments(ByVal shedulerInfo As ISchedulerInfo) As IEnumerable(Of Appointment)

Dim myInfo = TryCast(shedulerInfo, MySchedulerInfo)

Dim SchedulerID As String = myInfo.CategoryNames

Dim appointments As New List(Of Appointment)()

Try

Dim conn As New MySqlConnection

Dim sSQL As String

conn.ConnectionString = CONNECTION_STRING

conn.Open()

sSQL =

"SELECT id, subject, start_date_time, end_date_Time, description,calendar_color FROM digi_calendar_events INNER JOIN digi_calendar on digi_calendar_events.calendar_id = digi_calendar.ScheduleID"

Dim cmd As New MySqlCommand

cmd.Connection = conn

cmd.CommandText = sSQL & " WHERE calendar_id IN ('" & SchedulerID.Replace(",", "','") & "')"

Dim reader As MySqlDataReader

reader = cmd.ExecuteReader()

While reader.Read()

Dim apt As New Appointment()

'apt.Owner = owner;

apt.ID = reader.Item("id").ToString

apt.Subject = Convert.ToString(reader.Item("subject").ToString)

apt.Start = DateTime.SpecifyKind(Convert.ToDateTime(reader.Item("start_date_time").ToString), DateTimeKind.Utc)

apt.[End] = DateTime.SpecifyKind(Convert.ToDateTime(reader.Item("end_date_Time").ToString), DateTimeKind.Utc)

' apt.RecurrenceRule = Convert.ToString(reader("RecurrenceRule"))

' apt.RecurrenceParentID = If(reader("RecurrenceParentId") Is DBNull.Value, Nothing, reader("RecurrenceParentId"))

apt.Description = reader.Item("description").ToString

' If Not reader("Reminder") Is DBNull.Value Then

' Dim reminders As IList(Of Reminder) = Reminder.TryParse(Convert.ToString(reader("Reminder")))

' If reminders IsNot Nothing Then

' apt.Reminders.AddRange(reminders)

' End If

apt.Attributes.Add("AppointmentCssColor", reader.Item("calendar_color").ToString)

'If apt.RecurrenceParentID IsNot Nothing Then

'apt.RecurrenceState = RecurrenceState.Exception

'ElseIf apt.RecurrenceRule <> String.Empty Then

'apt.RecurrenceState = RecurrenceState.Master

'End If

LoadResources(apt)

appointments.Add(apt)

End While

reader.Close()

conn.Close()

Catch myerror As MySqlException

MsgBox("Erreur de connexion à la base de données: " & myerror.Message)

End Try

Return appointments

End Function

Public Overrides Sub Insert(ByVal schedulerInfo As ISchedulerInfo, ByVal appointmentToInsert As Appointment)

If Not PersistChanges Then

Return

End If

Try

Dim conn As New MySqlConnection

conn.ConnectionString = CONNECTION_STRING

conn.Open()

'PopulateAppointmentParameters(cmd, appointmentToInsert)

Dim cmd As New MySqlCommand

cmd.Connection = conn

cmd.CommandText = " INSERT INTO digi_calendar_events (subject, start_date_time, end_date_Time, calendar_id) VALUES ('" & appointmentToInsert.Subject & "','" & Format(appointmentToInsert.Start, "yyyy-MM-dd HH:mm:ss") & "','" & Format(appointmentToInsert.End, "yyyy-MM-dd HH:mm:ss") & "','" & appointmentToInsert.Resources.GetResourceByType("scheduler").Key & "')"

cmd.ExecuteNonQuery()

' If TypeOf DbFactory Is SqlClientFactory Then

' cmd.CommandText += Environment.NewLine + "SELECT SCOPE_IDENTITY()"

' Else

' cmd.ExecuteNonQuery()

'

' cmd.CommandText = "SELECT @@IDENTITY"

' End If

'Dim identity As Integer = Convert.ToInt32(cmd.ExecuteScalar())

'FillClassStudents(appointmentToInsert, cmd, identity)

conn.Close()

Catch myerror As MySqlException

MsgBox("Erreur de connexion à la base de données: " & myerror.Message)

End Try

End Sub

Public Overrides Sub Update(ByVal schedulerInfo As ISchedulerInfo, ByVal appointmentToUpdate As Appointment)

If Not PersistChanges Then

Return

End If

Try

Dim conn As New MySqlConnection

conn.ConnectionString = CONNECTION_STRING

conn.Open()

'PopulateAppointmentParameters(cmd, appointmentToUpdate)

Dim cmd As New MySqlCommand

cmd.Connection = conn

cmd.CommandText = "UPDATE digi_calendar_events SET subject = '" & appointmentToUpdate.Subject & "', start_date_time = '" & Format(appointmentToUpdate.Start, "yyyy-MM-dd HH:mm:ss") & "', end_date_Time = '" & Format(appointmentToUpdate.End, "yyyy-MM-dd HH:mm:ss") & "', calendar_id = '" & appointmentToUpdate.Resources.GetResourceByType("scheduler").Key & "' WHERE id = '" & appointmentToUpdate.ID & "'"

cmd.ExecuteNonQuery()

'ClearClassStudents(appointmentToUpdate.ID, cmd)

'FillClassStudents(appointmentToUpdate, cmd, appointmentToUpdate.ID)

conn.Close()

Catch myerror As MySqlException

MsgBox("Erreur de connexion à la base de données: " & myerror.Message)

End Try

End Sub

Public Overrides Sub Delete(ByVal schedulerInfo As ISchedulerInfo, ByVal appointmentToDelete As Appointment)

If Not PersistChanges Then

Return

End If

Try

Dim conn As New MySqlConnection

conn.ConnectionString = CONNECTION_STRING

conn.Open()

Dim cmd As New MySqlCommand

cmd.Connection = conn

cmd.CommandText = "DELETE FROM digi_calendar_events WHERE id = '" & appointmentToDelete.ID & "'"

cmd.ExecuteNonQuery()

conn.Close()

Catch myerror As MySqlException

MsgBox("Erreur de connexion à la base de données: " & myerror.Message)

End Try

End Sub

Public Overrides Function GetResources(ByVal schedulerInfo As ISchedulerInfo) As IDictionary(Of ResourceType, IEnumerable(Of Resource))

Dim resCollection As New Dictionary(Of ResourceType, IEnumerable(Of Resource))()

resCollection.Add(New ResourceType("Scheduler", False), Schedulers.Values)

' resCollection.Add(New ResourceType("Student", True), Students.Values)

Return resCollection

End Function

Private Sub LoadResources(ByVal apt As Appointment)

Try

Dim conn As New MySqlConnection

Dim sSQL As String

conn.ConnectionString = CONNECTION_STRING

conn.Open()

sSQL = "SELECT ScheduleID FROM digi_calendar"

Dim cmd As New MySqlCommand(sSQL, conn)

Dim reader As MySqlDataReader

reader = cmd.ExecuteReader()

While reader.Read()

' cmd.Parameters.Add(CreateParameter("@ClassID", apt.ID))

Dim Scheduler As Resource = Schedulers(Convert.ToInt32(reader("ScheduleID")))

apt.Resources.Add(Scheduler)

End While

reader.Close()

conn.Close()

'cmd.Parameters.Clear()

Catch myerror As MySqlException

MsgBox("Erreur de connexion à la base de données: " & myerror.Message)

End Try

End Sub

Private Function LoadSchedulers() As IEnumerable(Of Resource)

Dim resources As New List(Of Resource)()

Try

Dim conn As New MySqlConnection

Dim sSQL As String

conn.ConnectionString = CONNECTION_STRING

conn.Open()

sSQL = "SELECT ScheduleID, calendar_name FROM digi_calendar"

Dim cmd As New MySqlCommand(sSQL, conn)

Dim reader As MySqlDataReader

reader = cmd.ExecuteReader()

While reader.Read()

Dim res As New Resource()

res.Type = "scheduler"

res.Key = reader.Item("ScheduleID").ToString

res.Text = Convert.ToString(reader.Item("calendar_name").ToString)

' res.Attributes("Phone") = Convert.ToString(reader("Phone"))

resources.Add(res)

End While

reader.Close()

conn.Close()

Catch myerror As MySqlException

MsgBox("Erreur de connexion à la base de données: " & myerror.Message)

End Try

Return resources

End Function

Private Function LoadStudents() As IEnumerable(Of Resource)

Dim resources As New List(Of Resource)()

Using conn As DbConnection = OpenConnection()

Dim cmd As DbCommand = DbFactory.CreateCommand()

cmd.Connection = conn

cmd.CommandText = "SELECT [StudentID], [Name] FROM [DbProvider_Students]"

Using reader As DbDataReader = cmd.ExecuteReader()

While reader.Read()

Dim res As New Resource()

res.Type = "Student"

res.Key = reader("StudentID")

res.Text = Convert.ToString(reader("Name"))

resources.Add(res)

End While

End Using

Return resources

End Function

Private Sub FillClassStudents(ByVal appointment As Appointment, ByVal cmd As DbCommand, ByVal classId As Object)

For Each student As Resource In appointment.Resources.GetResourcesByType("Student")

cmd.Parameters.Clear()

cmd.Parameters.Add(CreateParameter("@ClassID", classId))

cmd.Parameters.Add(CreateParameter("@StudentID", student.Key))

cmd.CommandText = "INSERT INTO [DbProvider_ClassStudents] ([ClassID], [StudentID]) VALUES (@ClassID, @StudentID)"

cmd.ExecuteNonQuery()

Next

End Sub

Private Sub ClearClassStudents(ByVal classId As Object, ByVal cmd As DbCommand)

cmd.Parameters.Clear()

cmd.Parameters.Add(CreateParameter("@ClassID", classId))

cmd.CommandText = "DELETE FROM [DbProvider_ClassStudents] WHERE [ClassID] = @ClassID"

cmd.ExecuteNonQuery()

End Sub

Private Sub PopulateAppointmentParameters(ByVal cmd As DbCommand, ByVal apt As Appointment)

cmd.Parameters.Add(CreateParameter("@Subject", apt.Subject))

cmd.Parameters.Add(CreateParameter("@Start", apt.Start))

cmd.Parameters.Add(CreateParameter("@End", apt.[End]))

Dim teacher As Resource = apt.Resources.GetResourceByType("Teacher")

Dim teacherId As Object = Nothing

If teacher IsNot Nothing Then

teacherId = teacher.Key

End If

cmd.Parameters.Add(CreateParameter("@TeacherID", teacherId))

Dim rrule As String = Nothing

If apt.RecurrenceRule <> String.Empty Then

rrule = apt.RecurrenceRule

End If

cmd.Parameters.Add(CreateParameter("@RecurrenceRule", rrule))

Dim parentId As Object = Nothing

If apt.RecurrenceParentID IsNot Nothing Then

parentId = apt.RecurrenceParentID

End If

cmd.Parameters.Add(CreateParameter("@RecurrenceParentId", parentId))

cmd.Parameters.Add(CreateParameter("@Reminder", apt.Reminders.ToString()))

End Sub

End Class

and there is my RadSchedulerWebForm.aspx

<%@ Page Language="VB" AutoEventWireup="true" CodeBehind="RadSchedulerWebForm.aspx.vb" Inherits="digiCONTACTSWebApp.RadSchedulerWebForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style>

#scheduler-container {

width: 700px;

float: left;

}

#settings-container {

float: right;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Transparent">

</telerik:RadSkinManager>

<script type="text/javascript">

var categoryNames = new Array();

function ClientNodeChecked(sender, eventArgs) {

SchedulerID = eventArgs.get_node().get_value();

var scheduler = $find('<%=RadScheduler1.ClientID %>');

scheduler.rebind();

}

/* function OnClientAppointmentsPopulating(sender, eventArgs) {

eventArgs.get_schedulerInfo().SchedulerID = SchedulerID;

}*/

function OnClientAppointmentsPopulating(sender, eventArgs) {

addSelectedCategoriesToArray(categoryNames);

eventArgs.get_schedulerInfo().CategoryNames = categoryNames.toString();

categoryNames = new Array(); //clear the array

}

function OnClientAppointmentDataBound(sender, eventArgs) {

var app = eventArgs.get_appointment();

//debugger;

var backColor = app.get_attributes().getAttribute("AppointmentCssColor");

if (backColor)

app.set_cssClass(backColor);

// app.set_backColor("yellow");

// app.set_cssClass("rsCategoryYellow");

}

function addSelectedCategoriesToArray(categoryNamesArray) {

var $ = $telerik.$;

var categoryPanelBar = $find('<%=RadPanelBar1.ClientID %>');

$(':checkbox:checked', categoryPanelBar.get_element()).each(function () {

categoryNames.push($(this).attr('id'));

});

}

function rebindScheduler() {

var scheduler = $find('<%=RadScheduler1.ClientID %>');

scheduler.rebind();

}

</script>

<div id="settings-container">

<telerik:RadPanelBar ID="RadPanelBar1" Runat="server">

</telerik:RadPanelBar>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:vicidialConnectionString4 %>"

ProviderName="<%$ ConnectionStrings:vicidialConnectionString4.ProviderName %>"

SelectCommand="SELECT lead_id, status, `user`, source_id, list_id, phone_number, first_name, last_name, address1, city, postal_code, alt_phone, comments FROM vicidial_list">

</asp:SqlDataSource>

</div>

<div id="scheduler-container">

<telerik:RadScheduler ID="RadScheduler1" runat="server"

OnClientAppointmentsPopulating="OnClientAppointmentsPopulating" SelectedView="WeekView"

Width="1000px" Height="600px" Skin="Transparent" Culture="fr-FR"

onclientappointmentdatabound="OnClientAppointmentDataBound"

EnableCustomAttributeEditing="True" StartInsertingInAdvancedForm="True"

SelectedDate="07/13/2012 08:54:36">

<AdvancedForm EnableCustomAttributeEditing="True" Modal="True" />

<Localization AdvancedCalendarCancel="Annuler" AdvancedDay="Jour"

AdvancedMaskDay="Jour" HeaderDay="Jour" HeaderMonth="Mois"

HeaderToday="Aujourd'hui" HeaderWeek="Semaine" />

<WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />

</telerik:RadScheduler>

</div>

</form>

</body>

</html>

I would like to add a button to edit the appointment, but I do not know how.

answered on 30 Jul 2012, 12:50 PM

SchedulerOnMobileDevices.zip

Hi Yannick,

Please, review the attached sample and let me know if this is what you need?

Kind regards,
Peter
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.