datePicker cellRenderer

[orthobridge]

Hi, we want to customize the calendar dates cells, the data we need comes with the resource_events api call and we are unable to get the data from the crudManager at first load, I know we could intercept the response with the beforeResponseApply event, but how do we manipulate the datePicker cells in the beforeResponseApply event?

[Animal]

I don’t understand that. Can you explain in more detail? Maybe some pictures?

[orthobridge]

We're trying to highlight specific days in the date picker - the specific dates are supplied by the server as a JSON array.

This needs to happen automatically (when loaded and a new date is selected). What do we need to tap into to get it to fire accordingly.

Here's what it looks like presently:

   $(document).ready(function () {
    const calendar = new Calendar({
            // Start life looking at this date
            // date : localStorage.getItem("calLastDate") || new Date() - 1,
            date : new Date(),
            id:"scheduled",
            weekStartDay : 1,
            hideNonWorkingDays: true,
            nonWorkingDays : {
                0: true
            },
            datePicker : {
                editMonth : true,
                

            cellRenderer({ cell, date }) {
            let find_date = bookable_days?.find((day) => {return day.workdate == moment(date).format('YYYY-MM-DD')})
            if (find_date) {
                cell.innerHTML += `<span class="text-info m-0">**</span>`;
            }
            
            },
            
            onSelectionChange : ({ selection }) => {
            Toast.show(`You picked ${DateHelper.format(selection[0], 'MMM DD')}`);
            },
            onDateChange : () => {

            }
        },

It also looks crap - we'd prefer making the date font bold instead (a la Outlook)

Thanks in advance.

[Animal]

Just use CSS then. Add or remove a class to the cell element and then tweak your CSS to make that class make the cell bold

[Animal]

Also, there's cellRenderer you could use which would make this easier: https://bryntum.com/products/calendar/docs/api/Calendar/widget/CalendarDatePicker#config-cellRenderer

[Animal]

Screenshot 2024-08-01 at 14.04.26.png (518.51 KiB) Viewed 234 times

[orthobridge]

But what do we use to keep it updated as the date changes. What / how do we automatically run it on load and on date changed

[orthobridge]

From the attached video, you will see that we have a bookable_days object, we need the bookable_days object dates to customize the datePicker cells to our need, i am getting the bookable_days objects from the calendar beforeResponseApply event and setting it in a variable so i can use it in the datePicker cellRenderer method. When the page loads it doesn't work(the bookale_days object is not assigned to our variable) but when we move between dates it works as expected. My question is how can we invoke cellRenderer in the beforeResponseApply event as soon as data is available? or what other approach can we take ? Thanks

[Animal]

Just call its refresh method.

[marcio]

Hey,

Doc reference by the method mentioned by Animal https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#function-refresh.