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?
Support Forum
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.
- Attachments
-
- datepicker.PNG (19.54 KiB) Viewed 267 times
Also, there's cellRenderer you could use which would make this easier: https://bryntum.com/products/calendar/docs/api/Calendar/widget/CalendarDatePicker#config-cellRenderer
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
- Attachments
-
- 2024-08-01 16-17-13.mp4
- (3.88 MiB) Downloaded 15 times
Hey,
Doc reference by the method mentioned by Animal https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#function-refresh.
Best regards,
Márcio