Using A Calendar Component To Show a couple of Date Fields and Labels

[Effy]

Hello Everyone,

I have included a link to a sample app with information regarding the issue I am experiencing.

I have event records with a couple of dates associated with the event. Each date is for a specific task, ie; goal date to hire entertainment or goal date to find a caterer. Using a record rule, I was able to update the goal dates to completed when the status of the entertainers associated with the event are all marked hired or another similar field for the other tasks. I am now trying to add a calendar element that will allow me to see all of the past and upcoming dates together with the task associated with each date. The calendar element is only allowing me to choose a single field. Is there any way to incorporate all of the date fields and specific tags into the calendar without generating a connected date record in a new date data table?

In Summary anyone figure out how to add a couple of date fields to a calendar component?

Sample App

Thanks in advance

[Shumon]

https://jinnsystems.tadabase.io/ts/cal-demo

Add the additional fields from the ‘detailed view’ options as shown. But if your dates are produced by a calculated result then these fields might not show in the fields list beucase they are not table fields.

[Shumon]

[GREDDIE]

@Effy I think the calendar component is limited to a single date field for tracking in the calendar. I’ve not looked at the resource component but you may find a way to use that Resource Component | Tadabase

The alternative would be write or (or get someone to write) a custom component that does that for you but that’s probably going to be a little expensive…

As you say, the easier workaround would be to have related record of the individual days, perhaps joining the calendar records together.

[Effy]

Thank you for your response. I’m looking to have a couple of different date fields of a single record shown on the calendar component. I’m not sure if that will solve the issue.

[Effy]

Thanks for your response! I was trying to stay away from creating connected records for a few reasons. Primarily, I want the record and the date to be able to be automatically updated based on changes to either the record or the date and creating a separate table complicates this significantly.

[christopher93]

@Effy like this ?

[vegoPeogiOrg]

Yes, needed same thing can you share demo/code ?
thank you

[Effy]

Yes. This is exactly what I was looking for. Would you be able to share how you accomplished this?

[christopher93]

code is here. but noted-down you can’t open detail popup on new added events.

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 = "DATE TITLE FIELD SLUG";
    var dateFields = ["DATE FIELD SLUG".....];
    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);
    });
});

[moe]

@Effy has this code snippet worked for you? I’d love to mark it as Solved if it did.

[Effy]

Thanks for sharing! I am trying to implement it, but the calendar component is still only listing a single field’s dates. Do you notice any errors in the setup of the 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_39"; var dateFields = ["field_40", "field_41", "field_42", "field_43"];

The only other item that I changed was the component Id to match the pages component.

[christopher93]

i think you need to add all your dateFields in detail View only then you can get fields.

[Effy]

Works Great!