Customize Subject(Appointement) in Schedule | jQuery Forums

VS Velmurugan S Syncfusion Team July 3, 2015 12:48 PM UTC

Hi Pankaj,
Thank you for using Syncfusion products.

Your requirement can be achieved “displaying appointment in different color” by using our built in support “Categorize” and for the same prepared a sample which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119510/ze/Schedule-1153212332

Also, we request you to refer our help documentation from the following link to know about the categorize feature and other Schedule features.

Categorize feature:
http://help.syncfusion.com/ug/js/Documents/categorize.htm

All other features:
http://help.syncfusion.com/ug/js/index.html#!Documents/conceptsandfeatures43.htm

Please let us know if you need any further assistance.
Regards,
Velmurugan

SG Sakthi G Syncfusion Team July 6, 2015 04:09 AM UTC

From: Pankaj Sharma [mailto:pankajss29@gmail.com]
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

VS Velmurugan S Syncfusion Team July 6, 2015 12:13 PM UTC

Hi 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>

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

SG Sakthi G Syncfusion Team July 7, 2015 04:20 AM UTC

From: Pankaj Sharma [mailto:pankajss29@gmail.com]
Sent: Monday, July 06, 2015 8:30 AM
To: Syncfusion Support
Subject: Re: Syncfusion support community forum 119510, Customize Subject(Appointement) in Schedule, has been updated.

Hi Velmurugan,
Thanks for the reply.

The example you send meet exactly my requirement.

I will implement it in my project and let you know if have any issue.

Once again many thanks.

Regards
Pankaj

VS Velmurugan S Syncfusion Team July 7, 2015 10:47 AM UTC

Hi Pankaj,
Thanks for your update.
We are glad to hear that the solution provided by us helped you to meet your requirement.
Please let us know, if you require any further assistance. As always, we will be happy to assist you.
Regards,
Velmurugan

PA Pankaj August 13, 2015 01:08 PM UTC

I have implemented above functionality in my project and it will works as per the requirement but when I add below line of code to show context menu it will through "Unable to get property 'id' of undefined or null reference" JavaScript error.

contextMenuSettings: {

enable: true,

},

So please let me know where I am wrong.I have attached sample file for your reference.

You just run the html file it will through JavaScript error after that comment above line of code in html file and then again run it will work.

Many Thanks.

Attachment: Schedule_a04a50a7.rar

VS Velmurugan S Syncfusion Team August 14, 2015 12:15 PM UTC

Hi Pankaj,

Thank you for using Syncfusion products.

We are able to reproduce the above mentioned issue in the sample provided by you in this forum. This is an already known issue and we have fixed this issue and included in our Vol 2, 2015 release (version 13.2.0.29). We have prepared the sample with the code snippets mentioned in the sample given by you, which can be downloaded from the following location.

JS Playground link:

http://jsplayground.syncfusion.com/fok4y5gy

Therefore, we suggest you to upgrade your Essential Studio version.

Please let us know if it helps and if you need any further assistance on this.

Regards,

Velmurugan

SG Sakthi G Syncfusion Team August 17, 2015 04:50 AM UTC

From: Pankaj Sharma
Sent: Sunday, August 16, 2015 9:45 PM
To: Syncfusion Support <support@syncfusion.com>
Subject: Re: Syncfusion support community forum 119510, Customize Subject(Appointement) in Schedule, has been updated.

Hi Velmurugan,

Thanks for the valuable reply.

Regards
Pankaj Sharma

PA Pankaj August 17, 2015 12:37 PM UTC

Hi Velmurugan,

I have the requirement like in database some of the columns datatype is date and some of them is datetime depending on datatype I want to show time in appointement in Schedule.Currently for date datatype column it will show default time 5.30 AM-5.30 AM and for datetime it will work properly.So please let me know how can I hide time in appointement for date dataype.I have attached the screenshot for date datatype which will look like.

Many thanks!

Regards
Pankaj Sharma

Attachment: img3_ba103391.rar

VS Velmurugan S Syncfusion Team August 18, 2015 02:49 PM UTC

Hi Pankaj,
Thanks for your update.
You can meet your requirement “Customize the appointment display” using the “Appointment Template Support” and the same prepared the sample, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119510/ze/ScheduleTemplate109717453

In the above sample we have displayed only the “appointment Subject”. Please find the following code snippet to display the “Subject” in the appointment using the appointment template support.

<code>

<div>

<div>{{:Subject}}

</div>

        </div>
    </script>

$(function () {

var dManager = ej.DataManager(window.Template).executeLocal(ej.Query().take(10));

$("#Schedule1").ejSchedule({

appointmentTemplateId: "#apptemplate",

width: "100%",

height: "525px",

-----------------

});
});

</script>
</code>

Similarly, you can customize appointment display based on your requirement by passing required column value. Also, we request you to refer our following online document location to know about the “Appointment Template Support”.

http://docs.syncfusion.com/aspnetmvc/schedule/template

Please let us know if it helps and if you need any further assistance on this.
Regards,
Velmurugan

SG Sakthi G Syncfusion Team August 19, 2015 05:46 AM UTC

From: Pankaj Sharma
Sent: Wednesday, August 19, 2015 1:28 AM
To: Syncfusion Support <support@syncfusion.com>
Subject: Re: Syncfusion support community forum 119510, Customize Subject(Appointement) in Schedule, has been updated.

Hi Velmurugan,

Thanks for the reply.

As per your mail I have implemented "Appointment Template" functionality but in that case right click(Context Menu) not work when I click on the appointment and in case of cell click it will work(show context menu).So please let me know how can I show context menu when click on the appointment .

VS Velmurugan S Syncfusion Team August 19, 2015 12:40 PM UTC

Hi Pankaj,
Thanks for your update.
We regret for the inconvenience caused. The above mentioned scenario “ context menu not opening while applying appointment template” is a known issue and fix for this will be included in our upcoming releases volume 3, 2015.

Also we have prepared the workaround sample to overcome this issue, Please find the following code snippets that we have used in the sample to overcome the issue.

<code>

<div>

<div class="e-apptext">{{:Subject}}

</div>

</div>
</script>
</code>

The sample can be available in the following link.

http://jsplayground.syncfusion.com/heztsuuj

Please let us know if it helps and if you need any further assistance on this.
Regards,
Velmurugan