To Weweb Developer community Customer support
I hope this message finds you well. My name is Geraldine, Frontend Developer at Koridor-Inc and I am writing to request assistance with Weweb custom components.
I have an issue building a custom calendar using Fullcalendar Javascript Library @fullcalendar/vue3 and would appreciate your guidance and support in resolving it.
The full calendar component renders appropriately in the UI. I’ve declared the options in the calendarOptions object and passed it as a prop, and these work fine. However, my problem is that after defining the props and events in ww-config.js these are not working on editor mode. For example,
If I want to change the calendar “defaultView” from Month to Week this change is not applied and is not rendered in the UI.
If I want to make a modal show up after clicking on a date this modal does not show up.
If I want to hide the today button of the component this does not apply either.
In summary, the editor properties are not working.
I have reviewed the documentation and community forums, but unfortunately, I could not find a solution to this issue. As a result, I believe it is best to reach out to the official support channel for expert assistance.
Here are some additionals details that may be helpful:
Libraries used:
“devDependencies”: {
“@weweb/cli”: “latest”
},
"@fullcalendar/core": "^6.1.9",
"@fullcalendar/daygrid": "^6.1.9",
"@fullcalendar/interaction": "^6.1.9",
"@fullcalendar/list": "^6.1.9",
"@fullcalendar/timegrid": "^6.1.9",
"@fullcalendar/vue3": "^6.1.9"
Node version:
V20.6.0
Npm version:
10.1.0
Code component:
props: {
uid: { type: String, required: true },
content: { type: Object, required: true },
wwEditorState: { type: Object, required: true },
},
emits: [“trigger-event”, “update:content:effect”],
setup(props) {
const { value: selectedDate, setValue: setSelectedDate } =
wwLib.wwVariable.useComponentVariable({
uid: props.uid,
name: “selectedDate”,
type: “string”,
defaultValue: computed(() => String(props.content.selectedDate || “”)),
});
return { selectedDate, setSelectedDate };
},
data: () => ({
initialView: null,
}),
mounted() {
console.log(“mounted component”);
},
computed: {
calendarOptions: reactive({
get() {
return {
plugins: [
dayGridPlugin,
interactionPlugin,
timeGridPlugin,
listPlugin,
],
headerToolbar: {
left: “prev,next today”,
center: “title”,
right: “dayGridMonth,dayGridWeek,listDay”,
},
initialView: this.defaultView,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
editable: true,
select: this.handleCellClick,
dateClick: this.handleDateClick,
eventClick: this.handleEventClick,
changeView: this.handleViewChange,
eventAdd: (arg) => {
console.log(“ADD”, arg.event);
},
eventChange: (arg) => {
console.log(“CHANGE”, arg.event);
},
eventRemove: (arg) => {
console.log(“Remove”, arg.event);
return this.handleRemoveEvent
},
};
},
}),
defaultView() {
return this.content.defaultView;
},
watch: {
},
methods: {
handleEventClick(clickInfo) {
this.$emit(“trigger-event”, {
name: “eventClick”,
event: {
rawEventData: clickInfo.rawEventData,
event: {
start: clickInfo.start,
end: clickInfo.end,
title: clickInfo.title,
content: clickInfo.content,
calendar: clickInfo.split,
allDay: clickInfo.allDay,
},
initialView: this.initialView,
},
});
},
handleDateClick(event) {
const date = "date" in event ? event.date : event;
const calendar = "split" in event ? event.split : null;
this.$emit("trigger-event", {
name: "dateClick",
event: {
cell: { date, calendar },
initialView: this.initialView,
},
});
this.setSelectedDate(event.dateStr);
},
handleCellClick(selectInfo) {
const date = "date" in selectInfo ? selectInfo.date : selectInfo;
const calendar = "view" in selectInfo ? selectInfo.view : null;
this.$emit("trigger-event", {
name: "select",
event: {
cell: { date, calendar },
initialView: this.initialView,
},
});
let title = prompt("Please enter a new title for your event");
let calendarApi = selectInfo.view.calendar;
id.value = id.value + 1;
var event = calendarApi.getEventById("my-event");
if (event) {
event.remove();
}
if (title) {
calendarApi.addEvent({
id: id.value,
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay,
});
calendarApi.unselect();
}
},
handleViewChange(event) {
console.log("update initial view active", event);
this.initialView = event.view;
this.$emit("trigger-event", {
name: "changeView",
event: {
...(event || {}),
},
});
},
handleRemoveEvent: (arg) => {
if (arg.event) {
arg.event.remove();
}
},
},