Bryntum Calendar recurance Extjs with google icalendar

Question

I'm using Extjs Bryntum Calendar to create events and want to save them as google ics file and load events again into Sch calendar.

Can any body tell how to convert from Cal.model.Event to ical events and vice versa? data come from api as ical data.

my code IS:

resource store:

Ext.define('my.store.CalendarResource', {
    extend: 'Cal.data.ResourceStore',
    storeId: 'resource',
//    proxy: 'memory',
    model:'my.model.CalendarResource',
    proxy: {
        type: 'rest',
        url: 'api/calendars/scheduler'
    },

});

resource model:

Ext.define('my.model.CalendarResource', {
    extend : 'Cal.model.Resource',

   fields: [{
        name: 'Id',
        type:'string'
    }, {
        name: 'Name',
        type: 'string'
    }, {
        name: 'Color',
        type: 'string'
    }, {
        name: 'data'
    }]
});

calendar view

Ext.define('my.view.RecurrenceCalendar', {
    extend : 'Cal.panel.Calendar',
    xtype  : 'recurrencecalendar',
    
    requires : [
        'Sch.data.util.recurrence.Legend',
        'my.store.CalendarEvent',
        'my.store.CalendarResource'
    ],

    date          : new Date(),
    eventStore    : 'event',
    resourceStore : 'resource',

    // show the resource filter
    resourceFilter : {
        dock : 'right'
    },

    // Uncomment the below line to disable the recurring events feature
//     recurringEvents : false,

    initComponent : function () {
        var me = this;

        Ext.apply(me, {
            eventRenderer : function (eventRecord, resourceRecord, tplData) {
                var legend = '';

                if (me.recurringEvents && eventRecord.getRecurrence()) {
                    legend = Sch.data.util.recurrence.Legend.getLegend(eventRecord.getRecurrence(), eventRecord.getStartDate());
                }

                return eventRecord.getName() + (legend ? ' | ' + legend : '');
            },
            beforeeventadd : function (me, eventRecord, resources, eOpts) {
                var resourceStore = me.getResourceStore();
                alert('aaaaaaa')
            }
        });
        me.on('eventclick', function ( view, record, e ) {
            var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);

            me.editor.edit(record, el);
        });
        me.on('eventdbclick', function ( view, record, e ) {
            var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);

            me.editor.edit(record, el);
        });
        me.on('beforeeventadd',function(me, eventRecord, resources, eOpts){
            alert('123')
        });
        Ext.getStore('resource').reload();
        me.callParent(arguments);
    },
    
    onEventCreated : function (newEventRecord, resources) {
        // Overridden to provide some default values

        var resourceStore = this.getResourceStore();

        if (!newEventRecord.getResourceId()) {
            if (!Ext.isEmpty(resources)) {
                newEventRecord.assign(resources);
            } else if (resourceStore && resourceStore.getCount() > 0) {
                newEventRecord.assign(resourceStore.first());
            }
        }
    },
    
    
});

event store:

Ext.define('my.store.CalendarEvent', {
    extend  : 'Cal.data.EventStore',
    storeId : 'event',

});

Answer 1

What have you done?

To save records as iCalendar file:

You can serialize records from store to format .ical format (https://www.ietf.org/rfc/rfc2445.txt).

To load file as events:

Ex. you can listen change in file input and decode .ical format to your model parameters.

You can use existing open source library like https://github.com/nwcell/ics.js