| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/book_room/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link href='js/fullcalendar-4.2.0/packages/core/main.css' rel='stylesheet'/>
<link href='js/fullcalendar-4.2.0/packages/daygrid/main.css' rel='stylesheet'/>
<link href='js/fullcalendar-4.2.0/packages/timegrid/main.css' rel='stylesheet'/>
<link href='js/fullcalendar-4.2.0/packages/list/main.css' rel='stylesheet'/>
<script src='js/fullcalendar-4.2.0/packages/core/main.js'></script>
<script src='js/fullcalendar-4.2.0/packages/interaction/main.js'></script>
<script src='js/fullcalendar-4.2.0/packages/daygrid/main.js'></script>
<script src='js/fullcalendar-4.2.0/packages/timegrid/main.js'></script>
<script src='js/fullcalendar-4.2.0/packages/list/main.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://momentjs.com/downloads/moment.js'></script>
<script src='js/jquery-ui-1.12.1/jquery-ui.min.js'></script>
<link href='js/jquery-ui-1.12.1/jquery-ui.css' rel='stylesheet'/>
<script>
var calendar = '';
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
//var calendar = new FullCalendar.Calendar(calendarEl, {
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
defaultDate: '2019-06-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
events: {
url: 'event.json',
type: 'GET',
data: {
//custom_param1: 'something',
//custom_param2: 'somethingelse'
},
error: function () {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
},
eventClick: function (info) {
//console.log(info.event);
$('#eventContent .event_data').html('');
$("#startTime").html(moment(info.event.start).format('MMM Do h:mm A'));
$("#endTime").html(moment(info.event.end).format('MMM Do h:mm A'));
$("#desciption").html(info.event.extendedProps.desciption);
$("#contact_person").html(info.event.extendedProps.contact_person);
$("#contact_details").html(info.event.extendedProps.contact_details);
//$("#eventInfo").html(info.event.description);//description is not a standard field
//$("#eventLink").attr('href', info.event.url);
$("#eventContent").dialog({modal: true, title: info.event.title, width: 350});
},
dateClick: function (info) {
//console.log(info.dateStr);
$('#addEvent #start').val(info.dateStr+'T00:00:00');
$('#addEvent #end').val(info.dateStr+'T23:00:00');
$("#addEvent").dialog({modal: true, title: 'Add New Event', width: 600});
},
select: function (info) {
//console.log('selected ' + info.startStr + ' to ' + info.endStr);//endStr add 1 day? eg: select 25/1 and 26/1, endStr show 25/1 - 27/1
$('#addEvent #start').val(info.startStr+'T00:00:00');
$('#addEvent #end').val(moment(info.endStr).add(-1, 'days').format('YYYY-MM-DDT23:00:00'));//HH:mm:ss
$("#addEvent").dialog({modal: true, title: 'Add New Event', width: 600});
}
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
<div id="eventContent" title="Event Details" style="display:none;">
Start: <span id="startTime" class="event_data"></span><br>
End: <span id="endTime" class="event_data"></span><br><br>
Description: <span id="description" class="description"></span><br><br>
Contact Person: <span id="contact_person" class="event_data"></span><br><br>
Contact Details: <span id="contact_details" class="event_data"></span><br><br>
<!--<p id="eventInfo"></p>
<p><strong><a id="eventLink" href="" target="_blank">Read More</a></strong></p>-->
</div>
<div id="addEvent" title="Add New Event" style="display:none;">
<form action="" name="add_event_form" id="add_event_form">
<table style="width: 100%;">
<tr>
<td>Title:</td>
<td><input type="text" name="title" id="title" style="width: 100%;"/></td>
</tr>
<tr>
<td>Start:</td>
<td><input type="text" name="start" id="start" style="width: 100%;"/></td>
</tr>
<tr>
<td>End:</td>
<td><input type="text" name="end" id="end" style="width: 100%;"/></td>
</tr>
<tr>
<td>Description:</td>
<td><textarea name="description" id="description" style="width: 100%;"></textarea></td>
</tr>
<tr>
<td>Contact Person:</td>
<td><textarea name="contact_person" id="contact_person" style="width: 100%;"></textarea></td>
</tr>
<tr>
<td>Contact Details:</td>
<td><textarea name="contact_details" id="contact_details" style="width: 100%;"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<button type="button" onclick="add_event(this);">Submit</button>
</td>
</tr>
</table>
</form>
</div>
<script>
function add_event(_this) {
//console.log($(_this).closest('table').find('#title').val());
$.ajax({
url: 'ajax.php?action=add_event',
data: $('#add_event_form').serialize(),
type: "POST",
dataType: 'html',
success: function (msg) {
console.log(msg);
$('#addEvent').find('input, textarea, select').val('');
$("#addEvent").dialog('close');
calendar.refetchEvents();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
</body>
</html>