fullcalendar php global variable to external JS file-CodePudding

I'm trying to pass a global PHP variable to an external JS file for use with fullcalendar 3.1. Basically I want to allow the user to specify the start and the end time of the agendaDay. The agendaDay works perfectly fine if I manually define the hours such as 09:00:00, but I want the user to decide what time to start and end their business day.

index.php

$begin = "09:00:00"; // will become global variables.
$end = "17:00:00";
?>
<script>
var begin = '<?php echo $begin?>';
var end= '<?php echo $end?>';
</script>

<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.js"></script>

fullcalendar.js


var AGENDA_ALL_DAY_EVENT_LIMIT = 5;

var begin=$('#begin').val();
var end=$('#end').val();

// potential nice values for the slot-duration and interval-duration
// from largest to smallest
var AGENDA_STOCK_SUB_DURATIONS = [
    { hours: 1 },
    { minutes: 30 },
    { minutes: 15 },
    { seconds: 30 },
    { seconds: 15 }
];

fcViews.agenda = {
    'class': AgendaView,
    defaults: {
        allDaySlot: true,
        slotDuration: '00:30:00',
        minTime:   begin,
        maxTime: '22:00:00',
        slotEventOverlap: true // a bad name. confused with overlap/constraint system
    }
};

How can I get the variables start and end to in my fullcalendar.js file? Can someone show me the JS code needed for that please? Thanks in advance.

CodePudding user response：

In index.php:

<script>
var begin = '<?php echo $begin?>';
var end= '<?php echo $end?>';
</script>

this will set the two variables globally, so both of them will be available in all js files loaded. You can test this by doing a dump in fullcalendar.js on first line:

console.log('begin: ' begin  ' end: ' end); // you should see the values from php

but doing this using jQuery:

var begin=$('#begin').val();
var end=$('#end').val();

you will override the two variables with the output of jQuery selection.

A thing that will help is to do the dump at first line, and after this assignation.

console.log('begin: ' begin  ' end: ' end);
var AGENDA_ALL_DAY_EVENT_LIMIT = 5;

var begin=$('#begin').val();
var end=$('#end').val();
console.log('begin: ' begin  ' end: ' end);

This jQuery selection will search for inputs with id "begin" and "and" trying to get their values.

I suppose you have this inputs, for user to change them, so you should set the initial values, from php to them and your script will work:

<input type="text" id="begin" value="<?php echo $begin?>" />
<input type="text" id="end" value="<?php echo $end?>" />

If values $begin and $end are static and you do not have the inputs, you should remove the jQuery selection, this two lines, and script will work:

var begin=$('#begin').val();
var end=$('#end').val();