This topic is locked

Guide 10 - Calendar with holidays

3/14/2021 2:03:12 PM
PHPRunner Tips and Tricks
fhumanes author


I do not know exactly when it has appeared, but version 10.5 has a JavaScript Date API that allow us to dynamically customize the standard component of the dates selector and also, manage online (in JavaScript) the possible controls of these.
One of the things that still does not have is to add the control of holidays (in Spain are depending on the locality in which you are) so they can even be dynamic depending on the context of the application.
Objetive

  1. The objective of the example is to add to the standard dates selector on holidays and that the user can not select one of these days
  2. Taking advantage of this example, make known the existence of this API and teach how you can make controls on the date fields.


DEMO: https://fhumanes.com/datepicker


Technical solution
A table is created to define holidays:



CREATE TABLE `holidays` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`holiday` datetime NOT NULL,

`description` varchar(100) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;


Through the "Field Proxy" solution, we spent the set of holiday days to a field to be treated by JavaScript, for them at the events of "Before Display" we code:



$festiveDates = [];

$rs = DB::Query("select date(holiday) holiday from holidays");

while( $data = $rs->fetchAssoc() ) {

$festiveDates[] = $data["holiday"];

}

$pageObject->setProxyValue("disabledDate", $festiveDates)


And then at the event "JavaScript Onload event", we code that each time the date field we want to control, we verify that the indicated date does not correspond to any festive day.



var ctrl = Runner.getControl(pageid, 'datepicker');
// var js_start = new Date('2021-01-01');

// var js_end = new Date('2021-04-01');

// ctrl.setAllowedInterval( js_start, js_end, 'Date outside the interval' );
var disabledDate = proxy['disabledDate'];
ctrl.on('change', function(e){
var m_date = this.getMomentValue();

var i;

for (i = 0; i < disabledDate.length; i++) {

holiday = disabledDate[i];

holiday += ' 00:00:00';

h_date = new Date(holiday );

if ( m_date == h_date.getTime() ) {

swal ( "Error", "The selected date is a festive day!" , "error" );

// alert('The selected date is a festive day')

this.setValue('');

break;

}

}

});


If you know any other way to control the control, please indicate it to update the example and we can help other Phprunner users.
As always, for what you need to contact me through email: [email="fernandohumanes@gmail.com"]fernandohumanes@gmail.com[/email]

fhumanes author 3/21/2021

Hello:
I have created a new Bootstrap DataPicker plugin (date selector) that contemplates the holidays (so that these days are not selectable).
In my portal additional information and download of the plugin. https://fhumanes.com/blog/nuevo-plugin-bootstrap-datapicker/
Greetings,

fernando