Hello Friends I need to make web application in which i have to appointment Schedule between Two Persons SO i m Using Fullcalendar which Open a Popup have some fields like description,starttime and endtime. I want to set for each event which is same as FUllcalendar Selectable Demo start:start(variable from mycode) end: end I do not know I m in right direction or not so please Help me oUt IF changes of events autoupdate on database I need to show in calendar
UPDATED CODE :
JavaScript:
$(document).ready(function() {
var count=0;
var liveDate=new Date();
var dat = new Date();
var d = dat.getDate();
var m = dat.getMonth();
var y = dat.getFullYear();
$.getJSON("<?php echo base_url(); ?>names",function(data){
var select = $('#AgentName'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
}
else {
var options = select.attr('options');
}
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$("#popup").show();
$("#eventName").focus();
$("#submit").click(function(){
var title=$("#eventName").val();
if (title) {
calendar.fullCalendar('renderEvent',{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
var dataString={};
dataString['eventName']=title;
dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
$.ajax({
type : 'POST',
dataType : 'json',
url : '<?php echo base_url(); ?>data/insert',
data: dataString,
success: function(data) {
alert("Data Insert SuccessFully");
if(data.success)
alert("Data Insert SuccessFully");
}
});
}
calendar.fullCalendar('unselect');
calendar.fullCalendar('refetchEvents');
$("#popup").hide();
});
},
editable: true,
viewDisplay: function(view) {
if(view.name=="month" && count==0){
var a=$(".fc-day-number").prepend("<img src='/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'>");
count++;
}
},
eventSources: [
{
url: '<?php echo base_url(); ?>data/read', // use the `url` property
color: '#65a9d7', // an option!
textColor: '#3c3d3d' // an option!
}
]
});
});
CSS:
<style>
body {
text-align: left;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 70%;
margin: 0 auto;
text-align:left;
}
#popup{
width: 70%;
height: auto;
position: absolute;
background-color: rgba(255,255,255,0.8);
border-color: #0033ff;
border-style: solid;
display:block;
left: 400px;
top: 300px;
display: none;
cursor: pointer;
}
#detail{
background-color: #000;
}
#popup input{
width:480px;
border-radius: 5px;
}
#popup table label{
font-size: 100px;
}
#startTime{
background-image: url('/assets/images/calendar.png');
background-position:right center;
background-repeat:no-repeat;
}
#endTime{
background-image: url('/assets/images/calendar.png');
background-position:right center;
background-repeat:no-repeat;
}
</style>
HTML:
<div class="wrapper">
<div id='calendar'></div>
<div id="detail"></div>
<div id="popup">
<form name="addData" id="addData" action="" method="post">
<table>
<tr>
<td><lable for="eventName">Description:</lable></td>
<td><input name="eventName" id="eventName"></td>
</tr>
<tr>
<td><lable for="startTime">Start: </td>
<td><input type="text" id="startTime"name="startTime"/></td>
</tr>
<tr>
<td><lable for="endTime">End: </td>
<td><input type="text" id="endTime"name="endTime"/></td>
</tr>
<tr>
<td align="left"colspan="2">
<button type="submit"class="k-button" name="submit" id="submit">Submit</button>
<button type="reset" name="reset" class="k-button" id="reset">Reset</button>
<button type="submit"class="k-button" name="cancel" id="cancel">Cancel</button>
</td>
</tr>
</table>
</form>
<p><tt id="results"></tt></p>
</div>
</div>
