Hello, im working on a feature where i need to change the project calendar to one where sunday is not a working day, and i mannage to do that but there is one specific resource that i wish i could ignore when i change the calendar, like if i change the calendar now i change for all resources, is possible to ignora one specific resource when doing that?
this is what i have now and i use the checkbox to change the calendars
<template>
<div id="scheduler-container"></div>
</template>
<script setup>
import { onMounted } from "vue";
import {
SchedulerPro,
PresetManager,
StringHelper,
DateHelper,
ProjectModel,
Fullscreen,
} from "@bryntum/schedulerpro";
const zoomLevels = {
minuteAndHour: 1,
hourAndDay: 1,
};
const eventColors = {
Ventilation: "blue",
Heating: "orange",
Roof: "lime",
Attic: "lime",
Basement: "lime",
Cistern: "purple",
Gas: "red",
};
onMounted(() => {
const project = new ProjectModel({
autoLoad: false,
stm: {
autoRecord: true,
},
fullscreen: true,
calendar: "general",
transport: {
load: {
url: "./data/data.json",
},
},
// This config enables response validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse: true,
});
const schedulerConfig = new SchedulerPro({
appendTo: "scheduler-container",
presets: PresetManager.records.filter((preset) => zoomLevels[preset.id]),
project,
features: {
stripe: true,
dependencies: false,
resourceTimeRanges: true,
rowReorder: {
showGrip: true,
},
},
startDate: "2020-03-23",
endDate: "2020-03-28",
rowHeight: 90,
barMargin: 15,
eventStyle: "border",
resourceImagePath: "./users/",
columns: [
{
type: "resourceInfo",
text: "Manager",
},
],
eventRenderer({ eventRecord, renderData }) {
renderData.eventColor = eventColors[eventRecord.type] || "gray";
const { iconCls } = renderData;
renderData.iconCls = null;
return [
{
className: "event-header",
children: [
{
className: "event-sticky-content",
children: [
{
tag: "i",
className: iconCls,
},
{
html: StringHelper.encodeHtml(eventRecord.name),
},
],
},
],
},
{
className: "event-body",
html: `<div class="event-sticky-content">${schedulerConfig.formatDuration(
eventRecord.duration,
1
)} work days<i class="b-fa b-fa-arrow-right"></i>${Math.round(
DateHelper.diff(eventRecord.startDate, eventRecord.endDate, "d")
)} days</div>`,
},
];
},
tbar: [
{
type: "undoredo",
icon: "b-fa-undo",
items: {
transactionsCombo: null,
},
},
{
type: "checkbox",
text: "Bloquear domingo",
onChange: ({ checked }) => {
const generalCalendar = project.calendarManagerStore.first;
const sundayCalendar = project.calendarManagerStore.last;
let calendarType = checked ? generalCalendar : sundayCalendar;
project.setCalendar(calendarType);
},
},
"->",
{
ref: "fullscreenButton",
type: "button",
tooltip: "Tela Cheia",
icon: "b-fa-maximize",
alignSelf: "end",
ignoreLearn: true,
onClick() {
if (Fullscreen.enabled) {
const element = document.getElementById("scheduler-container");
if (element === null) {
throw new Error("You renamed ID of the scheduler component");
}
if (!Fullscreen.isFullscreen) {
Fullscreen.request(element);
} else {
Fullscreen.exit();
}
}
},
},
],
});
project.load().then(async () => {
await project.commitAsync();
project.calendar = schedulerConfig.calendarManagerStore.value =
project.calendarManagerStore.last;
});
});
</script>
<style scoped>
#scheduler-container {
height: 100vh; /* Adjust height as needed */
width: 100%;
}
</style>