Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #103924
    Kris Hill
    Participant

    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 1 year, 8 months ago by Kris Hill.
    #103928
    admin
    Keymaster

    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/

    #103932
    Kris Hill
    Participant

    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)

    #103933
    admin
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.