FullCalendar Custom Buttons

PHPMaker General Discussion (PHPMaker)
1

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

2

You cannot add JavaScript function (the “click” handler) by server event because it is a JavaScript function.

3

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 (https://discourse.hkvstore.com/t/integrating-fullcalendar-and-populating-from-json/2806/13), the headerToolbar lines works, but the customButtons ones don’t…Thanks

4

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.

5

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

6

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

7

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().

8

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 :frowning: 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

9
  1. 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>
  1. josejad wrote:


Object.assign(ew.calendarOptions.fullCalendarOptions.customButtons, myButton);

Wrong code. You may read Object.assign() again and then fix your code.

10

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” forumNot sure if the https://phpmaker.dev/docs/#/calendarsetup.html?id=server-events-and-client-scripts → Example 5 is not working and should be changed in the help.BTW, not sure if the