Customize Subject(Appointement) in Schedule
From: Pankaj Sharma [mailto:[email protected]]
Sent: Friday, July 03, 2015 9:19 AM
To: Syncfusion Support
Subject: Re: Syncfusion support community forum 119510, Customize Subject(Appointement) in Schedule, has been updated.
Hi Velmurugan,
Thanks for your valuable reply.
The example which you have provide in that on each date there is only one appointment.But my requirement is that suppose on 07-July-2015 I have three appointment I want to show these three appointment in three different color.
For e.g In above image I have two appointment on 01-July-2015.I want to show test app appointment in red color and Fishing appointment in yellow color.
Regards
Pankaj
Thanks for your update,
We suspect that you have created the appointments without the categorize values. Therefore, we suggest you to assign or specify the categorize values to the appointments in the schedule data. We have modified the sample to display the appointments based on your requirement “I have two appointment on 01-July-2015.I want to show test app appointment in red color and Fishing appointment in yellow color”. Please refer the following code snippet that will help you to meet the specified requirement.
<code>
<script type="text/javascript">
window.Default = [{
Id: 100,
Subject: "Bering Sea Gold",
StartTime: new Date(2015, 6, 2, 06, 00),
EndTime: new Date(2015, 6, 2, 08, 00),
Description: "",
AllDay: false,
Recurrence: true,
RecurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=10",
Categorize: "3"
},
-------------------------------
-------------------------------
-------------------------------
{
Id: 115,
Subject: "Cash Cab",
StartTime: new Date(2015, 6, 30, 15, 00),
EndTime: new Date(2015, 6, 30, 16, 30),
Description: "",
AllDay: false,
Recurrence: true,
RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=5",
Categorize: "1"
},
{
Id: 116,
Subject: "test app",
StartTime: new Date(2015, 6, 1, 06, 30),
EndTime: new Date(2015, 6, 1, 07, 30),
Description: "",
AllDay: false,
Recurrence: false,
Categorize: "5" // Here need to mention the id value of the categorize - For this appointment i have mentioned the "RedCategory" id ie: 5
},
{
Id: 117,
Subject: "Fishing",
StartTime: new Date(2015, 6, 1, 16, 00),
EndTime: new Date(2015, 6, 1, 17, 00),
Description: "",
AllDay: false,
Recurrence: false,
Categorize: "6" // For this appointment i have mentioned the "YellowCategory" id ie: 6
}
];
$(function () {
var dManager = window.Default;
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentView:"month",
categorizeSettings:
{
enable: true,
allowMultiple: true,
dataSource: [
{ text: "Blue Category", id: 1, color: "#7499e1", fontColor: "red" },
{ text: "Green Category", id: 2, color: "#7cce6e", fontColor: "white" },
{ text: "Orange Category", id: 3, color: "#ffaa00", fontColor: "green" },
{ text: "Purple Category", id: 4, color: "#cb6bb2", fontColor: "black" },
{ text: "Red Category", id: 5, color: "#e04343", fontColor: "white" },
{ text: "Yellow Category", id: 6, color: "#f8f264", fontColor: "black" }
],
text: "text", id: "id", color: "color", fontColor: "fontColor"
},
appointmentSettings: {
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule",
categorize: "Categorize" // Here we need to map the "categorize" field to take the effect of the categorize value }
});
});
</script>
</code>
The following screenshot illustrates the output of the above code snippets.
Also, we request you to create the new appointment or edit the appointment through “Details appointment window” to apply the categorize. Please refer the following screenshot to create the new appointment with the categorize value.
Please find the modified sample from the following location.
http://www.syncfusion.com/downloads/support/forum/119510/ze/Schedule380818061
Please let us know if it helps and if you need any further assistance on this.
Regards,
Velmurugan
