Page 1 of 1
FullCalendar Custom Buttons
Posted: Thu Apr 18, 2024 5:38 pm
by josejad
Hi:
I'm trying to add customButton as indicated in fullcalendar docs. (v2024)
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
I've tried in Page_Render:
$this->CalendarOptions->set("headerToolbar.left", "prev next today myCustomButton");
$this->CalendarOptions->set("customButtons", ["myCustomButton",["text" => "MyText"]]);
and in Page_Load
$this->CalendarOptions->import([
"initialView" => "dayGridWeek", // Set initial view to Year
"weekNumbers" => "true",
"businessHours" => "true",
"firstDay" => "1", //primer día, lunes
"customButtons"=>["myCustomButton",["text" => "MyText"]]
]);
With no results. I've tried several ways of writing the arrays... I just get a small button without text inside.
I don't know how to do just the button text, not to mention the part of the function.
Thanks
Re: Fullcalendar customButtons
Posted: Thu Apr 18, 2024 9:17 pm
by arbei
You cannot add JavaScript function (the "click" handler) by server event because it is a JavaScript function.
Re: FullCalendar Custom Buttons
Posted: Fri Apr 19, 2024 7:48 pm
by josejad
Hi again:
This line in page_render...
$this->CalendarOptions->set("headerToolbar.left", "prev next today myButton");
$this->CalendarOptions->set("customButtons.myButton.text", "My text");
...produces (as I can see in the "sources" tab in Chrome console):
, options = ew.deepAssign({}, ew.calendarOptions, {
"fullCalendarOptions": {
"initialView": "dayGridWeek",
"weekNumbers": "true",
"businessHours": "true",
"firstDay": "1",
"initialDate": "2024-04-19",
"headerToolbar": {
"right": "dayGridMonth,dayGridWeek,timeGridWeek,timeGridDay,listMonth",
"left": "prev next today BtnPlaniDiaria"
},
"customButtons": {
"myButton": {
"text": "Enviar"
}
},
which is the code I used in my previous script (viewtopic.php?p=165281), the headerToolbar lines works, but the customButtons ones don't...
Thanks
Re: FullCalendar Custom Buttons
Posted: Fri Apr 19, 2024 10:52 pm
by arbei
PHPMaker uses the customButtons
to add the "Add Event" button, it will overwrite your setting added on server event. You better add your custom buttons on the client side so you can add the click handler also, see Calendar Report Setup -> Server Events and Client Scripts -> Example 5. Make sure you add your button to customButtons
, don't overwrite the "Add Event" button.
Re: FullCalendar Custom Buttons
Posted: Sat Apr 20, 2024 2:06 am
by josejad
Thanks for the answer.
In one of my tries, I've played with that example, pero it seems not having effect.
I mean, I have in Client Scripts->Calendar Report->Client Script the next code:
ew.calendarOptions.popoverViews.push("dayGridWeek");
ew.calendarOptions.popoverViews.push("timeGridDay");
ew.calendarOptions.popoverViews.push("listWeek");
$(document).on("calendar", function (e, args) {
console.log(args.options); // View all options
arg.options.calendarOptions.initialView = "dayGridWeek"; // Customize FullCalendar options
alert('Testing');
});
but the code after inside {} seems to have no effect, I get nothing in console, the initial view is not "dayGridWeek" and I don't get the "Testing" alert.
The 3 first lines works...
That's why I haven't made more test with client scripts
Re: FullCalendar Custom Buttons
Posted: Sat Apr 20, 2024 3:20 am
by josejad
I think I'm getting closer thanks to your guide:
With this code
ew.calendarOptions.popoverViews.push("dayGridWeek");
ew.calendarOptions.popoverViews.push("timeGridDay");
ew.calendarOptions.popoverViews.push("listWeek");
ew.calendarOptions.fullCalendarOptions.customButtons = {
myButton: {
text: 'myText',
click: function() {
alert('testing');
}
},
}, //end CustomButtons
console.log(ew.calendarOptions);
Now I get in the console:
fullCalendarOptions:
customButtons:
myButton:
click:ƒ ()........ (code)
text: "myText"
But still no effect, myButton has no text and the click event doesn't fire
Re: FullCalendar Custom Buttons
Posted: Sat Apr 20, 2024 9:15 am
by arbei
You did not use the "calendar" event, it won't work without using it, your code is similar to adding custom buttom on the server side only (except that you can add the click handler now).
Again, arbei wrote:
Make sure you add your button to customButtons
, don't overwrite the "Add Event" button.
You may use Object.assign().
Re: FullCalendar Custom Buttons
Posted: Sun Apr 21, 2024 8:16 pm
by josejad
You did not use the "calendar" event, it won't work without using it
Hi... I've tried, but if I write the code using the "calendar" event, it doesn't fire
$(document).on("calendar", function (e, args) {
console.log(args.options); // View all options
arg.options.calendarOptions.initialView = "dayGridWeek"; // Customize FullCalendar options
alert('Testing');
});
You may use Object.assign().
I've tried, but no success :-( If I write
var myCustomButton = {
myButton: {
text: 'My Test',
click: function() {
alert('testing');
},
};
Object.assign(ew.calendarOptions.fullCalendarOptions.customButtons, myButton);
I get an error: "Cannot convert undefined or null to object
don't overwrite the "Add Event" button
The question is, it not seems to bo overwriten, the add button stills appear behind myButton (without text), and the click event works when I press the add button
Re: FullCalendar Custom Buttons
Posted: Mon Apr 22, 2024 12:19 pm
by arbei
Assume you have no JavaScript syntax errors, if event not fired, then your listener might be added later than the "calendar" event. If so, you may try move it earlier (as soon as jQuery is ready), e.g. in Page_Head server event,
<script>
loadjs.ready("jquery", () => {
$(document).on("calendar", (e, args) { ... });
});
</script>
josejad wrote:
Object.assign(ew.calendarOptions.fullCalendarOptions.customButtons, myButton);
Wrong code. You may read Object.assign() again and then fix your code.
Re: FullCalendar Custom Buttons
Posted: Mon Apr 22, 2024 4:52 pm
by josejad
Thanks.
That did the trick.
Finally this code is working:
loadjs.ready("jquery", () => {
$(document).on("calendar", function (e, args) {
const myButton = {
myButton: {
text: 'myText',
click: function() {
alert('testing');
}
},
};
args.options.customButtons = Object.assign(args.options.customButtons, myButton);
console.log(args.options); // View all options
});
});
I will post the complete code in the "User Submitted Tips" forum
Not sure if the https://phpmaker.dev/docs/#/calendarset ... nt-scripts -> Example 5 is not working and should be changed in the help.
BTW, not sure if the