Category / Section
How to create the customized Appointment Editor in in WinRT Schedule?
7 mins read
SfSchedule allows you to have customized appointment editor based on the requirement by overriding the default editor of it. This article explains you how to customize the default Appointment Editor Style in SfSchedule.
For Customizing Appoinment Editor in SfSchedule
Create a WinRT application and add SfSchedule control in it.
XAML
<syncfusion:SfSchedule Grid.Row="1" Grid.ColumnSpan="2" x:Name="Schedule" ScheduleType="Week" Background="White" Margin="20,40,20,20" IntervalHeight="50"> </syncfusion:SfSchedule>
Create a customized control with required field to be shown in the editor and with required functions to do certain actions such as saving, deleting appointments listening the button click events.
C#
#region NewCustomEditor Class
public class NewCustomEditor : Control
{
#region Constructor
public NewCustomEditor()
{
this.DefaultStyleKey = typeof(NewCustomEditor);
this.UpdateLayout();
}
#endregion
#region Private Members
public SfDateTimeCombo EditStartTimeMonth;
public SfDateTimeCombo EditStartTimeTime;
public SfDateTimeCombo EditEndTimeMonth;
public SfDateTimeCombo EditEndTimeTime;
public SfDateTimeCombo AddStartTimeMonth;
public SfDateTimeCombo AddStartTimeTime;
public SfDateTimeCombo AddEndTimeMonth;
public SfDateTimeCombo AddEndTimeTime;
public SfTextBoxExt Subject;
public SfTextBoxExt Notes;
public SfTextBoxExt Location;
public Button Close;
public Button Save;
public StackPanel ShowMorePanel;
public CustomizationDemo editorPage;
public ScrollViewer Scroll;
public ComboBox Reminder;
public Button Delete;
public ComboBox AddReminder;
public ComboBox AppType;
public ComboBox AddAppType;
#endregion
#region Override Methods
protected override void OnApplyTemplate()
{
editorPage = (CustomizationDemo)this.DataContext;
AddStartTimeMonth = GetTemplateChild("addstartmonth") as SfDateTimeCombo;
AddStartTimeTime = GetTemplateChild("addstarttime") as SfDateTimeCombo;
AddEndTimeMonth = GetTemplateChild("addendmonth") as SfDateTimeCombo;
AddEndTimeTime = GetTemplateChild("addendtime") as SfDateTimeCombo;
EditStartTimeMonth = GetTemplateChild("editstartmonth") as SfDateTimeCombo;
EditStartTimeTime = GetTemplateChild("editstarttime") as SfDateTimeCombo;
EditEndTimeMonth = GetTemplateChild("editendmonth") as SfDateTimeCombo;
EditEndTimeTime = GetTemplateChild("editendtime") as SfDateTimeCombo;
Subject = GetTemplateChild("sub") as SfTextBoxExt;
Notes = GetTemplateChild("notes") as SfTextBoxExt;
Location = GetTemplateChild("where") as SfTextBoxExt;
Close = GetTemplateChild("close") as Button;
Save = GetTemplateChild("save") as Button;
Reminder = GetTemplateChild("reminder") as ComboBox;
Delete = GetTemplateChild("delete") as Button;
ShowMorePanel = GetTemplateChild("showmorepanel") as StackPanel;
Scroll = GetTemplateChild("scroll") as ScrollViewer;
Scroll.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
this.Visibility = Visibility.Collapsed;
AddReminder = GetTemplateChild("addreminder") as ComboBox;
AppType = GetTemplateChild("AppType") as ComboBox;
AddAppType = GetTemplateChild("AddAppType") as ComboBox;
Close.Click += Close_Click;
Save.Click += Save_Click;
Delete.Click += Delete_Click;
AddReminder.ItemsSource = Reminder.ItemsSource = Enum.GetValues(typeof(ReminderTimeType));
AddReminder.SelectedIndex = Reminder.SelectedIndex = 0;
AppType.ItemsSource = AddAppType.ItemsSource = Enum.GetValues(typeof(Appointment.AppointmentTypes));
AppType.SelectedIndex = AddAppType.SelectedIndex = 0;
this.DataContext = editorPage.AddDataContext;
this.Visibility = Visibility.Collapsed;
base.OnApplyTemplate();
}
#endregion
#region Events
void Delete_Click(object sender, RoutedEventArgs e)
{
Visibility = Visibility.Collapsed;
if (editorPage.SelectedAppointment != null)
{ editorPage.schedule.Appointments.Remove(editorPage.SelectedAppointment);
}
}
void Save_Click(object sender, RoutedEventArgs e)
{
Visibility = Visibility.Collapsed;
Appointment app;
if (editorPage.SelectedAppointment == null)
{
app = new Appointment();
DateTime date = (DateTime)AddStartTimeTime.Value;
app.StartTime = ((DateTime)AddStartTimeMonth.Value).Date.Add(new TimeSpan(date.Hour, date.Minute, date.Second));
app.AppointmentTime = app.StartTime.ToString("HH:mm tt");
DateTime date1 = (DateTime)AddEndTimeTime.Value;
app.ReminderTime = (ReminderTimeType)AddReminder.SelectedItem;
app.AppointmentType = (Appointment.AppointmentTypes)AddAppType.SelectedItem;
app.EndTime = ((DateTime)AddEndTimeMonth.Value).Date.Add(new TimeSpan(date1.Hour, date1.Minute, date1.Second));
app.AppointmentBackground = new SolidColorBrush(Color.FromArgb(0xFF, 0xA2, 0xC1, 0x39));
}
else
{
app = editorPage.SelectedAppointment;
DateTime date = (DateTime)EditStartTimeTime.Value;
app.ReminderTime = (ReminderTimeType)Reminder.SelectedItem;
app.AppointmentType = (Appointment.AppointmentTypes)AppType.SelectedItem;
app.StartTime = ((DateTime)EditStartTimeMonth.Value).Date.Add(new TimeSpan(date.Hour, date.Minute, date.Second));
DateTime date1 = (DateTime)EditEndTimeTime.Value;
app.EndTime = ((DateTime)EditEndTimeMonth.Value).Date.Add(new TimeSpan(date1.Hour, date1.Minute, date1.Second));
app.AppointmentBackground = new SolidColorBrush(Color.FromArgb(0xFF, 0xA2, 0xC1, 0x39));
app.AppointmentTime = app.StartTime.ToString("HH:mm tt");
}
app.Subject = Subject.Text;
app.Notes = Notes.Text;
app.Location = Location.Text;
if (AppType.SelectedItem != null)
{
app.AppointmentType = (Appointment.AppointmentTypes)AppType.SelectedItem;
}
else
{
app.AppointmentType = Appointment.AppointmentTypes.Family;
}
if (editorPage.SelectedAppointment == null)
{
editorPage.schedule.Appointments.Add(app);
}
}
void Close_Click(object sender, RoutedEventArgs e)
{
Visibility = Visibility.Collapsed;
}
#endregion
}
#endregion
You need to apply your own style to above created editor control in the application as follows.
C#
<Style x:Key="Editor" TargetType="local:NewCustomEditor">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:NewCustomEditor">
<Grid Background="{TemplateBinding Background}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.37*"/>
<ColumnDefinition Width="0.63*"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="scroll" Grid.Column="0" Height="{TemplateBinding Height}">
<Grid Height="950" Background="#FFF4F4F4">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Margin="50,0,0,0" FontWeight="Normal" Foreground="#FF246BDE" Text="Details" FontSize="29" />
<TextBlock Grid.Row="3" Margin="50,0,0,0" FontWeight="Light" Foreground="Black" Text="When" FontSize="15" />
<input:SfDateTimeCombo x:Name="editstartmonth" Margin="50,0,0,0" Value="{Binding Appointment.StartTime}" FontWeight="Light" FormatString="MM,ddd,YYYY" Grid.Row="4"/>
<TextBlock Grid.Row="5" Margin="50,0,0,0" FontWeight="Light" Foreground="Black" VerticalAlignment="Center" Text="Start" FontSize="15" />
<input:SfDateTimeCombo x:Name="editstarttime" Margin="50,0,0,0" Value="{Binding Appointment.StartTime}" FontWeight="Light" FormatString="hh,mm,tt" Grid.Row="6"/>
<TextBlock Grid.Row="7" Margin="50,0,0,0" FontWeight="Light" VerticalAlignment="Center" Foreground="Black" Text="How Long" FontSize="15" />
<input:SfDateTimeCombo x:Name="editendmonth" Margin="50,0,0,0" Value="{Binding Appointment.EndTime}" FontWeight="Light" FormatString="MM,ddd,YYYY" Grid.Row="8"/>
<input:SfDateTimeCombo x:Name="addstartmonth" Margin="50,0,0,0" Value="{Binding CurrentSelectedDate}" FontWeight="Light" FormatString="MM,ddd,YYYY" Grid.Row="4"/>
<input:SfDateTimeCombo x:Name="addstarttime" Margin="50,0,0,0" Value="{Binding CurrentSelectedDate}" FontWeight="Light" FormatString="hh,mm,tt" Grid.Row="6"/>
<input:SfDateTimeCombo x:Name="addendmonth" Margin="50,0,0,0" FontWeight="Light" FormatString="MM,ddd,YYYY" Grid.Row="8"/>
<input:SfDateTimeCombo x:Name="addendtime" Margin="50,0,0,0" FontWeight="Light" FormatString="hh,mm,tt" Grid.Row="10"/>
<TextBlock Grid.Row="9" Margin="50,0,0,0" FontWeight="Light" Foreground="Black" VerticalAlignment="Center" Text="End" FontSize="15" />
<input:SfDateTimeCombo x:Name="editendtime" Margin="50,0,0,0" Value="{Binding Appointment.EndTime}" FontWeight="Light" FormatString="hh,mm,tt" Grid.Row="10"/>
<TextBlock Grid.Row="11" Margin="50,0,0,0" FontWeight="Light" Foreground="Black" VerticalAlignment="Center" Text="Where" FontSize="15" />
<input:SfTextBoxExt x:Name="where" Foreground="#FF454545" FontSize="15" Text="{Binding Appointment.Location}" FontFamily="Segoe UI" Margin="50,0,75,0" FontWeight="Light" Grid.Row="12"/>
<StackPanel Grid.Row="13" x:Name="showmorepanel" Grid.RowSpan="10">
<TextBlock Margin="50,15,0,0" FontWeight="Light" Foreground="Black" VerticalAlignment="Center" Text="Reminder" FontSize="15" />
<ComboBox Margin="50,15,75,0" SelectedItem="{Binding Appointment.ReminderTime}" x:Name="reminder" />
<ComboBox Margin="50,15,75,0" x:Name="addreminder" />
<TextBlock Margin="50,15,0,0" FontWeight="Light" Foreground="Black" VerticalAlignment="Center" Text="Appointment Type" FontSize="15" />
<ComboBox Margin="50,15,75,0" SelectedItem="{Binding Appointment.AppointmentType}" x:Name="AppType" />
<ComboBox Margin="50,15,75,0" x:Name="AddAppType" />
</StackPanel>
</Grid>
</ScrollViewer>
<Grid Grid.Column="1" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="0.8*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.6*"/>
<ColumnDefinition Width="0.4*"/>
</Grid.ColumnDefinitions>
<input:SfTextBoxExt x:Name="sub" BorderThickness="0" Grid.Column="0" Margin="25,0,0,0" Grid.Row="1" Text="{Binding Appointment.Subject}" FontWeight="ExtraLight" FontSize="25" Watermark="Subject" TextWrapping="Wrap"/>
<StackPanel HorizontalAlignment="Right" Margin="0,0,40,0" Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
<Button x:Name="delete" Background="Transparent">
<Button.Content>
<Grid>
<Grid Name="backgroundGrid" Width="40" Height="40" Visibility="Visible">
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FF246BDE" Name="Stroke" Visibility="Visible" />
</Grid>
<Path Data="M33.977998,27.684L33.977998,58.102997 41.373998,58.102997 41.373998,27.684z M14.841999,27.684L14.841999,58.102997 22.237998,58.102997 22.237998,27.684z M4.0319996,22.433001L52.183,22.433001 52.183,63.999001 4.0319996,63.999001z M15.974,0L40.195001,0 40.195001,7.7260003 56.167001,7.7260003 56.167001,16.000999 0,16.000999 0,7.7260003 15.974,7.7260003z" Stretch="Uniform" Fill="#FF246BDE" Width="20" Height="20" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Button.Content>
</Button>
<Button x:Name="save" Background="Transparent">
<Button.Content>
<Grid>
<Grid Width="40" Height="40" Visibility="Visible">
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FF246BDE" Visibility="Visible" />
</Grid>
<Path Data="M8.1099597,36.94997L8.1099597,41.793968 39.213959,41.793968 39.213959,36.94997z M12.42,0.049999889L18.4,0.049999889 18.4,12.252 12.42,12.252z M0,0L7.9001866,0 7.9001866,14.64218 39.210766,14.64218 39.210766,0 47.401001,0 47.401001,47.917 0,47.917z" Stretch="Uniform" Fill="#FF246BDE" Width="20" Height="20" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Button.Content>
</Button>
<Button x:Name="close" Background="Transparent">
<Button.Content>
<Grid>
<Grid Width="40" Height="40" Visibility="Visible">
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FF246BDE" Visibility="Visible" />
</Grid>
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FF246BDE" Width="20" Height="20" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Button.Content>
</Button>
</StackPanel>
<Line X1="0" X2="1" Grid.ColumnSpan="2" Margin="25,0,0,0" Stroke="#FF246BDE" Stretch="Fill" Grid.Row="2" StrokeThickness="1"/>
<input:SfTextBoxExt x:Name="notes" BorderThickness="0" Grid.ColumnSpan="2" Margin="25,50,0,0" Text="{Binding Appointment.Notes}" Grid.Row="3" FontWeight="ExtraLight" FontSize="20" Watermark="Notes" TextWrapping="Wrap"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To perform actions over appointments, the above style contains Save, Delete and Close button etc. This style is applied to the NewCustomEditor and it is added in application next to Schedule control.
XAML
<syncfusion:SfSchedule Grid.Row="1" Grid.ColumnSpan="2" x:Name="Schedule" ScheduleType="Week" Background="White" Margin="20,40,20,20" IntervalHeight="50"/>
<local:NewCustomEditor x:Name="customeEditor" Grid.ColumnSpan="2" Grid.Row="1" Style="{StaticResource Editor}"/>
Using schedule_AppointmentEditorOpening event of SfSchedule, you can avoid the opening of default Appointmet Editor by setting the Cancel property to true. And you can open your own editor in this event by setting the required data to your control from the appointment information in the argument of the event.
Refer to the following code example to cancel the Appointment Editor Event and make the new editor to be visible.
C#
void schedule_AppointmentEditorOpening(object sender, AppointmentEditorOpeningEventArgs e)
{
e.Cancel = true;
AddDataContext = new BindingClass { Appointment = e.Appointment, CurrentSelectedDate = e.StartTime };
if (e.Appointment != null)
// Creating/Opening your own editor when opening the editor to edit the existing item.
EditAppointment();
else
// Creating/Opening your own editor when opening the editor to edit the existing item.
AddAppointment();
}
EditAppointment method is used to EDIT the saved appointment using customized Appointment Editor.
C#
private void EditAppointment()
{
customeEditor.DataContext = null;
customeEditor.DataContext = AddDataContext;
customeEditor.Visibility = Visibility.Visible;
SelectedAppointment = AddDataContext.Appointment as Appointment;
customeEditor.AddAppType.Visibility = Visibility.Collapsed;
customeEditor.AddReminder.Visibility = Visibility.Collapsed;
customeEditor.AppType.Visibility = Visibility.Visible;
customeEditor.Reminder.Visibility = Visibility.Visible;
customeEditor.AddEndTimeMonth.Visibility = Visibility.Collapsed;
customeEditor.AddEndTimeTime.Visibility = Visibility.Collapsed;
customeEditor.AddStartTimeMonth.Visibility = Visibility.Collapsed;
customeEditor.AddStartTimeTime.Visibility = Visibility.Collapsed;
customeEditor.EditStartTimeMonth.Visibility = Visibility.Visible;
customeEditor.EditStartTimeTime.Visibility = Visibility.Visible;
customeEditor.EditEndTimeMonth.Visibility = Visibility.Visible;
customeEditor.EditEndTimeTime.Visibility = Visibility.Visible;
customeEditor.Delete.Visibility = Visibility.Visible;
if (AddDataContext.Appointment != null)
{
customeEditor.EditStartTimeMonth.Value = (AddDataContext.Appointment as Appointment).StartTime;
customeEditor.EditStartTimeTime.Value = (AddDataContext.Appointment as Appointment).StartTime;
customeEditor.EditEndTimeMonth.Value = (AddDataContext.Appointment as Appointment).EndTime;
customeEditor.EditEndTimeTime.Value = (AddDataContext.Appointment as Appointment).EndTime;
}
customeEditor.Subject.Text = SelectedAppointment.Subject;
customeEditor.Notes.Text = SelectedAppointment.Notes;
customeEditor.Location.Text = SelectedAppointment.Location;
}
AddAppointment method is declared to add the new appointment using customized Appointment Editor based on the Selected Dates.
C#
private void AddAppointment()
{
customeEditor.DataContext = null;
customeEditor.DataContext = AddDataContext;
customeEditor.Visibility = Visibility.Visible;
SelectedAppointment = null;
customeEditor.AppType.SelectedIndex = 0;
customeEditor.AddReminder.SelectedIndex = 0;
customeEditor.AddEndTimeMonth.Visibility = Visibility.Visible;
customeEditor.AddEndTimeTime.Visibility = Visibility.Visible;
customeEditor.AddStartTimeMonth.Visibility = Visibility.Visible;
customeEditor.AddStartTimeTime.Visibility = Visibility.Visible;
if (AddDataContext.CurrentSelectedDate != null)
{
customeEditor.AddStartTimeMonth.Value = customeEditor.AddStartTimeTime.Value = AddDataContext.CurrentSelectedDate.Value;
customeEditor.AddEndTimeMonth.Value = customeEditor.AddEndTimeTime.Value = AddDataContext.CurrentSelectedDate.Value.AddHours(1);
}
else if (AddDataContext.Appointment != null)
{
customeEditor.AddStartTimeMonth.Value = customeEditor.AddEndTimeMonth.Value = ((AddDataContext as BindingClass).Appointment as Appointment).StartTime;
customeEditor.AddStartTimeTime.Value = customeEditor.AddEndTimeTime.Value = ((AddDataContext as BindingClass).Appointment as Appointment).StartTime.AddHours(1);
}
customeEditor.AppType.Visibility = Visibility.Visible;
customeEditor.AddReminder.Visibility = Visibility.Visible;
customeEditor.AddAppType.Visibility = Visibility.Collapsed;
customeEditor.Reminder.Visibility = Visibility.Collapsed;
customeEditor.EditStartTimeMonth.Visibility = Visibility.Collapsed;
customeEditor.EditStartTimeTime.Visibility = Visibility.Collapsed;
customeEditor.EditEndTimeMonth.Visibility = Visibility.Collapsed;
customeEditor.EditEndTimeTime.Visibility = Visibility.Collapsed;
customeEditor.Delete.Visibility = Visibility.Collapsed;
customeEditor.Subject.Text = string.Empty;
customeEditor.Notes.Text = string.Empty;
customeEditor.Location.Text = string.Empty;
}
Sample Location (In WinRT Sample Browser): WinRT->Schedule->CustmizationDemo
Figure 1: Customized Appointment Editor in SfSchedule
