Schedule Component

5 Replies
2 Participants

Created by
SB Stefano Bottaro

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
Schedule

Created On
Oct 23, 2014 07:05 AM UTC

Last Activity On
Feb 13, 2015 12:33 PM UTC

Want to subscribe?
SIGN IN

I'm a Lightswitch fan, i'm trying to integrate your Schedule widget in my Html5 application, .....without success.

I can display the empty schedule but without the appointment results.

can you help me, where is my mistake?

below the source code , pasted from your example, (the results is the same in my application)

I tks you in advance....

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

<head>

// DataManager creation

var dManager = ej.DataManager({ url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc" });

// Query creation

var queryString = ej.Query().from("Events").take(10);

$("#Schedule1").ejSchedule({

width: "100%",

height: "550px",

currentDate: new Date(2014,4,5),

fields: {

dataSource: dManager,

query: queryString,

idField: "Id",

subjectField: "Subject",

startTimeField: "StartTime",

endTimeField: "EndTime",

alldayField: "AllDay",

recurrenceField: "Recurrence",

recurrenceRuleField: "RecurrenceRule"

}

});

</script>

</head>

5 Replies

VS Velmurugan S Syncfusion Team October 23, 2014 03:51 PM UTC

Hi Stefano,

Thanks for using Syncfusion products.

Since we couldn't track the fault why the appointments didn't got displayed in your application, therefore we have prepared a simple sample by adding the schedule control in the lightswitch application. And also we have prepared the document and it contains the steps to use the schedule control in the lightswitch application with all the appointments retrieved properly, which can downloaded from the following link.

Sample:

http://www.syncfusion.com/downloads/support/directtrac/general/Application7-1952146194.zip

Document:

http://www.syncfusion.com/downloads/support/directtrac/general/Creating_the_schedule_control_sample_in_LightSwitch172310090.zip

Kindly try the mentioned steps in your sample and please let us know, if you need any further assistance on this.

Note: If we have misunderstood your query, kindly revert back to us with clear information.

Regards,

Velmurugan

SB Stefano Bottaro October 24, 2014 09:37 PM UTC

Hi Velmurgan,

tks for the response, I have Downloaded the Document and LS Project.

The first time the code not working fine, I see a blank page with only the default application logo, then i have inspected the code and find theese evidence:

I have modify some rows:

in Schedule.js

deleted the row "myapp.Schedule.c_Event_render = function (element, contentItem) {.....}" ...it is twice row

in Default.html

add the row '<link rel='nofollow' href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" /> '.

Then finally i can see the fine Schedule calendar at work....

It is very beautifull and practical I'm very happy and thank you for the collaboration

I hope my experience is useful to other developers

VS Velmurugan S Syncfusion Team October 27, 2014 06:43 AM UTC

Hi Stefeno,

Thanks for your update.

Please let us know if you need any further assistance, we will happy to assist you further.

Regards,

Velmurugan

SB Stefano Bottaro February 11, 2015 06:18 PM UTC

Hi to all,

I've integrated with my Lightswitch HTML5 Project, your Schedule with great results.

Now I need to add another step, for categorizing room and resource.

Other request, how can I localize in Italian language the Schedule Component

can you help me?

I am attaching below the js code integrated in lightswitch (VS2012 VB)

Tks in advance:......

function createSchedule(element, contentItem) {

var itemTemplate = $("<div id='Schedule1'></div>");

itemTemplate.appendTo($(element));

contentItem.value.oncollectionchange = function () {

var first = contentItem.children[0];

var id = first.children[0].valueModel.name;

var subject = first.children[1].valueModel.name;

var starttime = first.children[2].valueModel.name;

var endtime = first.children[3].valueModel.name;

var allday = first.children[4].valueModel.name;

var recurrence = first.children[5].valueModel.name;

var recurrencerule = first.children[6].valueModel.name;

var important = first.children[7].valueModel.name;

var room = first.children[8].valueModel.name;

var resource = first.children[9].valueModel.name;

var dataManger = ej.DataManager({ json: contentItem.value.data, });

itemTemplate.ejSchedule({

width: "100%",

height: "550px",

timeMode: "24",

timeZone: "UTC +2:00",

startHour: 8,

endHour: 21,

BusinessStartHour: 9,

BusinessEndHour: 18,

enableAppointmentResize: true,

enableAppointmentNavigation: true,

enableResize: true,

allowKeyboardNavigation: true,

title: "Creazione Appuntamento",

enableResize: true,

allowDragDrop: true,

reminder: "ongetReminderList",

reminderSettings: { enable: true },

currentDate: new Date(),

close: "clearFields",

contextMenuSettings: {

enable: true,

menuItems: {

appointment: [

{ id: "open", text: "Open Appointment" },

{ id: "delete", text: "Cancella Appuntamento" },

{ id: "categorize", text: "Categorizza" }

cells: [

{ id: "new", text: "Nuovo Appuntamento" },

{ id: "recurrence", text: "Nuovo Appuntamento ricorrente" },

{ id: "today", text: "Oggi" },

{ id: "gotodate", text: "Vai alla data" },

{ id: "settings", text: "Configura" },

{ id: "view", text: "Vista", parentId: "settings" },

{ id: "timemode", text: "Vista Oraria", parentId: "settings" },

{ id: "view_Day", text: "Giornaliera", parentId: "view" },

{ id: "view_Week", text: "Settimanale", parentId: "view" },

{ id: "view_Workweek", text: "Settimana lavorativa", parentId: "view" },

{ id: "view_Month", text: "Mese", parentId: "view" },

{ id: "timemode_Hour12", text: "12 Ore", parentId: "timemode" },

{ id: "timemode_Hour24", text: "24 Ore", parentId: "timemode" },

{ id: "businesshours", text: "Orario Lavorativo", parentId: "settings" }

]

}

appointmentSettings: {

dataSource: dataManger,

id: id,

subject: subject,

startTime: starttime,

endTime: endtime,

allDay: allday,

recurrence: recurrence,

recurrenceRule: recurrencerule,

categorize: resource

//id: "Id",

//subject: "Subject",

//startTime: "StartDate",

//endTime: "EndDate",

//allDay: "Allday",

//recurrence: "Recurrence",

//recurrenceRule: "RecurrenceRule",

//categorize: "WorkSpace"

});

$('.print').bind("click", function () {

var obj = $("#Schedule1").data("ejSchedule"); // Public method to print the schedule obj.print();

});

};

VS Velmurugan S Syncfusion Team February 13, 2015 12:33 PM UTC

Hi Stefano,

Thanks for using Syncfusion products.

We would like to inform you that, Currently we do not have complete schedule control support in Light Switch platform. Therefore, we have prepared a work around sample to meet your requirements “adding rooms and resources and localize in Italian language the Schedule Component”. Which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/directtrac/117454/ScheduleSampleLightswich366769561.zip

We have used the following code snippet to meet your requirements in the above sample.

i) Including the localization

<code>

Schedule.js page:

// You can replace the corresponding string to for your localization.

ej.Schedule.Locale["it-IT"] = {

ReminderWindowTitle: "Fenêtre de rappel",

CreateAppointmentTitle: "créer un rendez-",

RecurrenceEditTitle: "Modifier répétition nomination",

RecurrenceEditMessage: "Comment voulez-vous changer le cas dans la série?",

RecurrenceEditOnly: "Seulement cette nomination",

RecurrenceEditSeries: "La série entière",

AppointmentSubject: "sujet",

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

Delete: "effacer"

};

itemTemplate.ejSchedule({

width: "100%",

height: "550px",

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

close: "clearFields",

locale: "it-IT",

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

});

Default.html page;

</code>

ii) Adding the rooms and resources

We have passed JSON directly to the resources and room collection as mentioned in the following code snippets.

<code>

var itemTemplate = $("<div id='schedule1'></div>");

itemTemplate.appendTo($(element));

contentItem.value.oncollectionchange = function () {

var first = contentItem.children[0];

var id = first.children[0].valueModel.name;

var subject = first.children[1].valueModel.name;

var description = first.children[2].valueModel.name;

var starttime = first.children[3].valueModel.name;

var endtime = first.children[4].valueModel.name;

var allday = first.children[5].valueModel.name;

var recurrence = first.children[6].valueModel.name;

var recurrencerule = first.children[7].valueModel.name;

var roomId = first.children[8].valueModel.name;

var ownerId = first.children[9].valueModel.name;

var categorize = first.children[10].valueModel.name;

itemTemplate.ejSchedule({

width: "100%",

height: "550px",

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

close: "clearFields",

locale: "it-IT",

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"

contextMenuSettings: {

enable: true,

menuItems: {

appointment: [

{ id: "open", text: "Open Appointment" },

{ id: "delete", text: "Cancella Appuntamento" },

{ id: "categorize", text: "Categorizza" }

cells: [

{ id: "new", text: "Nuovo Appuntamento" },

{ id: "recurrence", text: "Nuovo Appuntamento ricorrente" },

{ id: "today", text: "Oggi" },

{ id: "gotodate", text: "Vai alla data" },

{ id: "settings", text: "Configura" },

{ id: "view", text: "Vista", parentId: "settings" },

{ id: "timemode", text: "Vista Oraria", parentId: "settings" },

{ id: "view_Day", text: "Giornaliera", parentId: "view" },

{ id: "view_Week", text: "Settimanale", parentId: "view" },

{ id: "view_Workweek", text: "Settimana lavorativa", parentId: "view" },

{ id: "view_Month", text: "Mese", parentId: "view" },

{ id: "timemode_Hour12", text: "12 Ore", parentId: "timemode" },

{ id: "timemode_Hour24", text: "24 Ore", parentId: "timemode" },

{ id: "businesshours", text: "Orario Lavorativo", parentId: "settings" }

]

}

group: {

resources: ["Rooms", "Owners"]

resources: [

{

field: "RoomId",

title: "Room",

name: "Rooms", allowMultiple: false,

resourceSettings: {

dataSource: [

{ text: "Room1", id: 1, groupId: 1, color: "#cb6bb2" },

{ text: "Room2", id: 2, groupId: 1, color: "#56ca85" }],

text: "text", id: "id", groupId: "groupId", color: "color"

}

}, {

field: "OwnerId",

title: "Owner",

name: "Owners", allowMultiple: true,

resourceSettings: {

dataSource: [

{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },

{ text: "Steven", id: 3, groupId: 2, color: "#f8a398" },

{ text: "Michael", id: 5, groupId: 1, color: "#7499e1" }

text: "text", id: "id", groupId: "groupId", color: "color"

}

}],

appointmentSettings: {

dataSource: contentItem.value.data,

id: id,

subject: subject,

description: description,

startTime: starttime,

endTime: endtime,

allDay: allday,

recurrence: recurrence,

recurrenceRule: recurrencerule,

resourceFields: roomId + ',' + ownerId, // Here we are binding the map field for “Rooms” and “ Owners”

categorize:categorize // Here we are binding the map field for the “Categorize” value

}

});

};

</code>

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

Regards,

Velmurugan

5 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
SB Stefano Bottaro
Platform
ASP.NET MVC
Control
Schedule
Created On
Oct 23, 2014 07:05 AM UTC
Last Activity On
Feb 13, 2015 12:33 PM UTC