For a Friday the 13th celebration, I am showing some code that combines a small bit of PHP-based code and the Kendo UI (http://www.telerik.com). This code tests if the date is a Friday, and if it is is a Friday, is it a Friday the 13th. Based on a Boolean field, $isFri13, the Kendo UI displays differently - if today's date is a Friday the 13th, you will see "It's Jason's Day" blocked for the entire day. Double-clicking on the event will open the event's details, with the delete and save buttons removed (display: none). On other days, you will see "It's NOT Jason's Day" and you will be able to delete or edit the event.
A working example is shown here:
Try it
Here's the code:
|
<?php
$current_date = date("Y/m/d"); // example added on 2015/2/6
$scheduledate = $current_date;
$d = new DateTime(@$argv[1]);
$isFri13 = false;
$Fri = $d->modify('fri');
if ($Fri->format('d') == 13) {
$Fri13 = $d->format("Y-m-d\n");
//echo $Fri13;
$isFri13 = true;
}
?>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My PHP Kendo UI Example</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
<script src="http://runner.telerik.io/edit-button.min.js"></script><script>snippInfo = { hash:'OYazU',version:1,editOrigin: 'http://dojo.telerik.com/'}; editButtonHelper.createButton(snippInfo,document.body);</script>
<div id="scheduler"></div>
<?php if ($isFri13) { ?>
<script>
$("#scheduler").kendoScheduler({
date: new Date("<?php echo $scheduledate; ?>"),
views: [ "day", "month" ],
dataSource: [
{
id: 1,
start: new Date("<?php echo $scheduledate; ?> 08:00 AM"),
end: new Date("<?php echo $scheduledate; ?> 09:00 AM"),
isAllDay: true,
title: "It's Jason's Day",
description: "http://en.wikipedia.org/wiki/Friday_the_13th\n\nhttp://fridaythe13thfilms.com/"
}
],
edit: function(e) {
console.log("Editing", e.event.title);
}
});
</script>
<style>
.k-scheduler-delete {
display: none;
}
.k-scheduler-update {
display: none;
}
.k-event-template {
background-color: red;
color: white;
font-style: italic;
}
</style>
<?php } else { ?>
<script>
$("#scheduler").kendoScheduler({
date: new Date("<?php echo $scheduledate; ?>"),
views: [ "day", "month" ],
dataSource: [
{
id: 1,
start: new Date("<?php echo $scheduledate; ?> 08:00 AM"),
end: new Date("<?php echo $scheduledate; ?> 09:00 AM"),
title: "It's NOT Jason's Day"
}
],
edit: function(e) {
console.log("Editing", e.event.title);
}
});
</script>
<?php } ?>
</body>
</html>
|