Modify Calendar Load Date on Tadabase Calendar Component

App Development
1

Hello Tadabase community,

I am currently working on a feature in my Tadabase application that requires me to adjust the default load date or week view of the FullCalendar component. Instead of the calendar defaulting to the current week, I aim to have it load a specific date.

I have tried to achieve this by crafting a JavaScript script, which you can find below:

TB.render('component_X', function(componentData) {
    function getAllFields(obj) {
      let fields = [];
      function extractFields(data) {
        for (const key in data) {
          if (key === 'fields') {
            fields.push(...data[key]);
          } else if (typeof data[key] === 'object' && data[key] !== null) {
            extractFields(data[key]);
          }
        }
      }
      extractFields(obj);
      return fields;
    }

    var calendarFields = getAllFields(JSON.parse(jQuery(componentData.ele).attr("options"))["detailView"]);
    var calendar = jQuery(componentData.ele).find(".af-full-calendar").fullCalendar();
    var titleFields = "{field_43}";
    var dateFields = ["{field_65.start}", "{field_65.end}"];
    var events = [];

    componentData.records.forEach(function(record, i) {
      dateFields.forEach(function(f, j) {
        if (record.hasOwnProperty(f) && record[f] != "") {
          colName = calendarFields.find(c => c.slug == f).name;
          var eventData = {
            id: i +"-"+ j,
            title: record[titleFields] + ' - ' + colName,
            start: record[f]
          };
          events.push(eventData);
        }
      });
    });

    // Remove existing events
    calendar.fullCalendar('removeEvents');

    // Add new events
    events.forEach(function(event) {
      calendar.fullCalendar('renderEvent', event);
    });

    // Set initial date to November 22, 2023
    var startDate = new Date(2023, 10, 22); // JavaScript counts months from 0-11. November is month 10.
    calendar.fullCalendar('gotoDate', startDate);
});

I am reaching out to the community for assistance on this:

a) Is this script heading in the correct direction, or have I missed any critical elements?
b) Has anyone else here attempted to do something similar? If so, could you share your approach or the solution you arrived at?

Any insights, recommendations, or guidance would be deeply appreciated. Thank you for your time and help!

Best regards,

2

@kruizf201

1 Like
3

Hi @MickaelP , I tried your calendar JS, looks to be on the right path, but if you are able to do JS, maybe you want to build the calendar from a custom component, this way you will create the calendar from scratch and manipulate the view with the calendar JS API, check more here:

https://fullcalendar.io/

Best
Kevin

1 Like