Export all events when add an event

[andre0ani]

Hello,
Thanks for this great work.
I'm a junior dev web.
I would like to get all events of a calendar (to store it in BDD or a CSV file) but I don't know how to do this.
Any help please ?
Thanks ;-)
Patrice

[william-troup]

You can use the public function export("csv") method, or you can use the Export tool, which is available in every view.

[andre0ani]

Thanks.
But, it's the first time I use an external library and I don't really know how to do this...

I have this code for the calendar :

` <script>
var calendarInstance1 = new calendarJs("calendar1", __TRANSLATION_OPTIONS, {
lang: "fr",
exportEventsEnabled: true,
useLocalStorageForEvents: true,
useAmPmForTimeDisplays: true,
events: {
onEventsExported: function(events) {
console.log(events);
},
onEventsLoaded: function(events) {
console.log('Événements chargés:', events);
}
}
});

    var event1 = {
        from: new Date(),
        to: new Date(new Date().getTime() + 3600000),
        title: "Nouvel événement",
        description: "Description du nouvel événement."
    };

</script>`

But I don't know how to interact whit it, when we clic to add an event for exemple.

[william-troup]

OK,

So in your script, you can do the following:

<script>
var calendarInstance = new calendarJs( "myCalendar", {
   // Your options
} );

calendarInstance.export( "csv" ); // This will download all the events in the calendar into a CAV file.
</script>

[andre0ani]

Ok, thanks.
Excuse me, perhaps I'm not being clear.

If I do that, the events are donwloaded automaticaly at the creation of the calendar whitout the possibilities to choose if the file has to be saved on the server.
What I want is to get all the events to be saved in a file (or variable to put in a database) at the creation of an event. And right now, I don't know how to interact.

The aim is to save the user's events elsewhere than in the browser, so that they can be reloaded the next time the user logs on.

I've tried this but nothing's work :

` <script>
var calendarInstance1 = new calendarJs("calendar1", __TRANSLATION_OPTIONS, {
lang: "fr",
exportEventsEnabled: true,
useLocalStorageForEvents: true,
useAmPmForTimeDisplays: true,
events: {
onEventsExported: function(events) {
console.log(events);
},
onEventsLoaded: function(events) {
console.log('Événements chargés:', events);
},
onEventAdded: function(export) {
console.log('Événements exportés:', events);
}
}
});

    var event1 = {
        from: new Date(),
        to: new Date(new Date().getTime() + 3600000),
        title: "Nouvel événement",
        description: "Description du nouvel événement."
    };

    calendarInstance1.onEventAdded.export( "csv" );

</script>`

[william-troup]

OK, you can call the following method:

<script>
  var jsonEvents = calendarInstance1.getEvents();
</script>

You can then iterate through the array and save the events anywhere you want.

You can find all the documentation and example here:

https://calendar-js.com/

Will

[andre0ani]

Yes, but what I don't see how to do is launch this export action when an event is added, with this action as I understand it:
onEventsAdded.
There's nothing on the exemple code to interact with events on the calendar.

[william-troup]

Right,

You need to do the following:

<script>
  var calendarInstance = new calendarJs( "myCalendar", {
     events: {
         onEventsAdded:  onMyEventsAdded,
         onEventAdded:  onMyEventAdded
     }
  } );

  function onMyEventsAdded( events ) {
     // The events added
  }

  function onMyEventAdded( event ) {
     // The event added
  }
</script>

This will do what you want.

[andre0ani]

I'm really sorry, but nothings happen when I add an event :

` <script>
var calendarInstance1 = new calendarJs("calendar1", __TRANSLATION_OPTIONS, {
lang: "fr",
exportEventsEnabled: true,
useAmPmForTimeDisplays: true,
events: {
onEventAdded: onMyEventAdded,
}
});

function onMyEventAdded(event) {
    var allEvents = calendarInstance1.getEvents();
    console.log("Tous les événements après l'ajout:", allEvents);
    calendarInstance1.export('csv');
    console.log("Export");
}

</script>`

Thank you very much for your patience. I guess I'll have to find another solution.

[william-troup]

Your setting it up incorrectly when using translations, which is causing the options your passing to be ignored.

Use the following:

  <script>
        var calendarInstance = new calendarJs( "calendar", __TRANSLATION_OPTIONS );

        calendarInstance.setOptions( {
           events: {
              onEventsAdded:  onMyEventsAdded,
              onEventAdded:  onMyEventAdded
           }
        } );

        function onMyEventsAdded( events ) {
           // The events added
        }

        function onMyEventAdded( event ) {
           // The event added
        }
    </script>

[andre0ani]

Thanks a lot !!