Loading iCal data in Scheduler ICS

[Kris Hill]

I’d like to load data from external calendars in addition to having local data.  Is it possible to have multiple data sources for a calendar?  In testing I have tried to link to a Google calendar however trying to load the URL directly gives a CORS security error due to domain attempting to call it.  I then tried pulling the data in my controller and using it as the data source but I get Fetch API cannot load (followed by the ical data).

So maybe two questions, can I load multiple iCal sources (or do I need to combine in my controller) and two what is the ics format in the data adapter looking for?

Code is simply based on Google calendar synch example.

dataSource: new window.Smart.DataAdapter({
dataSource: ‘/calendar/calendardata/.ics?Id=1’,
dataSourceType: ‘ics’,
dataFields: [
{ name: ‘dateStart’, map: ‘DTSTART’, dataType: ‘date’ },
{ name: ‘dateEnd’, map: ‘DTEND’, dataType: ‘date’ },
{ name: ‘label’, map: ‘SUMMARY’, dataType: ‘string’ },
{ name: ‘location’, map: ‘LOCATION’, dataType: ‘string’ },
{ name: ‘description’, map: ‘DESCRIPTION’, dataType: ‘string’ },
{ name: ‘rrule’, map: ‘RRULE’, dataType: ‘string’ },
{ name: ‘extdate’, map: ‘EXDATE’, dataType: ‘string’ },
{ name: ‘status’, map: ‘STATUS’, dataType: ‘string’ },
{ name: ‘reccurenceId’, map: ‘RECURRENCEID’, dataType: ‘string’ },
{ name: ‘uid’, map: ‘UID’, dataType: ‘string’ },
{ name: ‘categories’, map: ‘CATEGORIES’, dataType: ‘string’ },
{ name: ‘alarm’, map: ‘ALARM’, dataType: ‘any’ }
]

My asp.net core controller:

var webRequest = WebRequest.Create(iCalPath);
using var response = webRequest.GetResponse();
using var content = response.GetResponseStream();
using var reader = new StreamReader(content);
var icsContents = reader.ReadToEnd();
byte[] icsByteData = Encoding.ASCII.GetBytes(icsContents);
return File(icsByteData, “text/calendar”);

• This topic was modified 2 years ago by Kris Hill.

[admin]

Hi Kris,

We have two help topics about import with Google Calendar – https://www.htmlelements.com/docs/scheduler-google-calendar-integration/ and https://www.htmlelements.com/docs/scheduler-google-calendar-sync/.

However, we do not have built-in support about importing multiple files as a data source.

A sample ICS file which we load and use in our examples is:

BEGIN:VCALENDAR
PRODID:-//HTMLElements//JQX Scheduler//EN
VERSION:2.0
CALSCALE:GREGORIAN
METHOD:PUBLISH
X-WR-CALNAME:scheduler
X-WR-TIMEZONE:Europe/Sofia
BEGIN:VEVENT
DTSTART:20201206T073000Z
DTEND:20201206T093000Z
DTSTAMP:20201206T092352Z
UID:scheduler46d9
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Website Re-Design Plan
END:VEVENT
BEGIN:VEVENT
DTSTART:20201209T100000Z
DTEND:20201209T120000Z
DTSTAMP:20201206T092352Z
UID:scheduler9572
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Book Flights to San Fran for Sales Trip
CATEGORIES:priorityId/1
BEGIN:VALARM
ACTION:DISPLAY
DESCRIPTION:Book Flights to San Fran for Sales Trip Early
TRIGGER:-P0DT0H33M0S
END:VALARM
BEGIN:VALARM
ACTION:DISPLAY
DESCRIPTION:Book Flights to San Fran for Sales Trip Late
TRIGGER:-P0DT0H32M0S
END:VALARM
END:VEVENT
BEGIN:VEVENT
DTSTART:20201206T110000Z
DTEND:20201206T133000Z
DTSTAMP:20201206T092352Z
UID:scheduler94f9
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Install New Router in Dev Room
CATEGORIES:priorityId/1
RRULE:FREQ=MONTHLY;WKST=MO;INTERVAL=1;BYMONTHDAY=6
END:VEVENT
BEGIN:VEVENT
DTSTART;VALUE=DATE:20201210
DTEND;VALUE=DATE:20201212
DTSTAMP:20201206T092352Z
UID:scheduler6da3
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Google AdWords Strategy
RRULE:FREQ=WEEKLY;WKST=MO;INTERVAL=5;BYDAY=SU,TU,FR;UNTIL=20210223T220000Z
END:VEVENT
BEGIN:VEVENT
DTSTART:20201213T220000Z
DTEND:20201215T215959Z
DTSTAMP:20201206T092352Z
UID:scheduler6da3
RECURRENCE-ID:20201212T220000Z
CREATED:20201206T092352Z
DESCRIPTION:
SEQUENCE:1
STATUS:CONFIRMED
SUMMARY:Google AdWords Strategy
END:VEVENT
BEGIN:VEVENT
DTSTART:20201207T080000Z
DTEND:20201207T090000Z
DTSTAMP:20201206T092352Z
UID:schedulerb6fa
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Approve Personal Computer Upgrade Plan
CATEGORIES:priorityId/2
END:VEVENT
BEGIN:VEVENT
DTSTART:20201207T100000Z
DTEND:20201207T113500Z
DTSTAMP:20201206T092352Z
UID:scheduleraa9a
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Final Budget Review
CATEGORIES:priorityId/2
END:VEVENT
BEGIN:VEVENT
DTSTART:20201206T110000Z
DTEND:20201206T131500Z
DTSTAMP:20201206T092352Z
UID:scheduler6587
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:New Brochures
CATEGORIES:priorityId/2
END:VEVENT
BEGIN:VEVENT
DTSTART:20201207T070000Z
DTEND:20201207T101500Z
DTSTAMP:20201206T092352Z
UID:scheduler6dcd
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Install New Database
CATEGORIES:priorityId/1
END:VEVENT
BEGIN:VEVENT
DTSTART:20201208T100000Z
DTEND:20201208T120000Z
DTSTAMP:20201206T092352Z
UID:scheduler7ff9
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Approve New Online Marketing Strategy
CATEGORIES:priorityId/2
END:VEVENT
BEGIN:VEVENT
DTSTART:20201206T070000Z
DTEND:20201206T093000Z
DTSTAMP:20201206T092352Z
UID:scheduler9304
CREATED:20201206T092352Z
DESCRIPTION:
TRANSP:TRANSPARENT
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Upgrade Personal Computers
CATEGORIES:priorityId/1
END:VEVENT
END:VCALENDAR

The above file is generated by exporting a Google Calendar.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Kris Hill]

I appreciate the quick reply but it does not seem to be working for me.  I took your iCal data and put it into a calendar.ics file on my web server.  I get the same error that I get before when I attempt to load from my controller.  If I put the URL to the ICS file it downloads the file correctly.  Do you see anything wrong that I’m missing?

Here is the HTML based on scheduler example:

<div class=”content”>
<section id=”sideA”>
<div class=”calButton-container”>
</div>
<div class=”controls-container”>
<smart-calendar id=”calendar”></smart-calendar>
<smart-input id=”searchBar” class=”underlined” placeholder=”Search this calendar”></smart-input>
<smart-tree id=”calTree” selection-mode=”checkBox” toggle-element-position=”far”>
<smart-tree-items-group expanded>
My calendars
<smart-tree-item value=”birthday” selected>Birthdays</smart-tree-item>
<smart-tree-item value=”holiday” selected>Holidays</smart-tree-item>
<smart-tree-item value=”event” selected>Events</smart-tree-item>
</smart-tree-items-group>
</smart-tree>
</div>
</section>
<section id=”sideB”>
<smart-scheduler id=”calScheduler”></smart-scheduler>
</section>
</div>

 

Here is the javascript code:

const calDataSource = new window.Smart.DataAdapter({
dataSource: ‘/landing/calendar.ics’, ///calendardata/.ics?applicationId=@Model.Id’,
dataSourceType: ‘ics’,
dataFields: [
{ name: ‘dateStart’, map: ‘DTSTART’, dataType: ‘date’ },
{ name: ‘dateEnd’, map: ‘DTEND’, dataType: ‘date’ },
{ name: ‘label’, map: ‘SUMMARY’, dataType: ‘string’ },
{ name: ‘location’, map: ‘LOCATION’, dataType: ‘string’ },
{ name: ‘description’, map: ‘DESCRIPTION’, dataType: ‘string’ },
{ name: ‘rrule’, map: ‘RRULE’, dataType: ‘string’ },
{ name: ‘extdate’, map: ‘EXDATE’, dataType: ‘string’ },
{ name: ‘status’, map: ‘STATUS’, dataType: ‘string’ },
{ name: ‘reccurenceId’, map: ‘RECURRENCEID’, dataType: ‘string’ },
{ name: ‘uid’, map: ‘UID’, dataType: ‘string’ },
{ name: ‘categories’, map: ‘CATEGORIES’, dataType: ‘string’ },
{ name: ‘alarm’, map: ‘ALARM’, dataType: ‘any’ }
]
});

window.Smart(‘#calScheduler’, class {
get properties() {
return {
//Properties
view: ‘month’,
views: [‘day’, ‘week’, ‘month’],
dataSource: calDataSource,
dateCurrent: new Date(),
firstDayOfWeek: 1
//disableDateMenu: true,
//currentTimeIndicator: true
};
}
});

The error I’m getting is:

Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild’)
at BaseElement.appendChild (smart.grid.js:1379:94941)
at BaseElement._handleDataAdapter (smart.scheduler.js:199:43175)
at BaseElement.propertyChangedHandler (smart.scheduler.js:199:17058)
at t.updateProperty (smart.grid.js:1379:72986)
at BaseElement.set [as dataSource] (smart.grid.js:1379:74120)
at smart.grid.js:1379:81524
at window.<computed> (smart.grid.js:1379:81584)
at HTMLDocument.<anonymous> (Project?selectedId=36:271:16)
at e (jquery.min.js:2:30005)
at t (jquery.min.js:2:30307)

[admin]

Hi Kris,

I suppose that when the initialization function is called, the scheduler is already created. It should be called before the DOM is loaded. Otherwise, it will create unnecessary renderings as every property you set will require re-render in that case. Hope this helps. Otherwise, you may send us a sample which we can test and debug to support@jqwidgets.com.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts