<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost/fullcalendar/demos/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Sample Textbox:');
if (title) {
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/fullcalendar/demos/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
I have implemented the fullcallendar with php mysql.I am able to query database and get the events from table.But I am not able to add the events in proper format.
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
if i use formatdata add function not working.If i remove this, its working but inserting in db as 0000-00-00 for date and time.I dont know what am doing wrong.I have tried everything to sort this out.Can anybody help me out in this???
Try this:
var start = Year+":"+Month+":"+Date+" "+hour+":"+min+":"+sec;
var end = Year+":"+Month+":"+Date+" "+hour+":"+min+":"+sec;
Instead
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
It will work for database insertion
Add this before the previous code:
var Year = date.getFullYear();
var Month = date.getMonth() + 1;
var Date = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
Related
I have this google piechart, which is working fine, except on the legend text along with it, I wanna show the percentage and numbers. The below would be the code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Registration',
legend: { position: 'right', textStyle: { color: 'blue', fontSize: 16 } }
};
$.ajax({
type: "POST",
url: "adminrep.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px; margin-top:60px;"></div>
How do I get this done? Thanks in advance.
Try using .setFormattedValue to format the the labels in the DataTable.
This still requires you do a little bit of manual calculation for the getting the total sum of values, but it should work:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Registration',
legend: {
position: 'right',
textStyle: { color: 'blue', fontSize: 16 }
}
};
$.ajax({
type: "POST",
url: "/echo/json/",
data: {
json: JSON.stringify({
d: [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]})
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var count = data.getNumberOfRows();
var values = Array(count).fill().map(function(v, i) {
return data.getValue(i, 1);
});
var total = google.visualization.data.sum(values);
values.forEach(function(v, i) {
var key = data.getValue(i, 0);
var val = data.getValue(i, 1);
data.setFormattedValue(i, 0, key + ' (' + (val/total * 100).toFixed(1) + '%)');
});
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px; margin-top:60px;"></div>
Example: https://jsfiddle.net/cn74tvmL/show
You need to use number format:
var formatter = new google.visualization.NumberFormat({pattern: '#,### MW'});
formatter.format(data, 1);
or:
chart1.options = {
.
.
.
pieSliceText: 'value',
legend: {
position: 'labeled',
labeledValueText: 'both',
textStyle: {
color: 'blue',
fontSize: 14
}
}
};
i´m still searching for an answer why my calendar is not showing up...
I´m workin on an multisite WordPress and want to implement WP-Fullcalendar but i think i do something wrong.
I think when you´re looking into my code you´ll perhaps laught but i dont know the anser why my calendar don´t show.
Thank you for your help! Greetings
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [
{
title: 'All Day Event',
start: '2017-04-01'
},
{
title: 'Long Event',
start: '2017-04-07',
end: '2017-04-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-16T16:00:00'
}
],
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'event.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'event.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'event.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'> ?></div>
</body>
</html>
You're loading jQuery twice. Remove one of them and it should resolve your issue.
I am using fullcalendar plugin to display data for one week. The problem is event is rendering only for the week which i select first. Later when i change week events are getting created but are not rendering. When i change again to week I selected first, event creation and rendering both happens. I am using $('#calendar').fullCalendar('gotoDate', WeekStartDate) to go to desired week.
$.ajax({
type: "POST",
contentType: "application/json",
data: '{}',
url: 'DataService.svc/CMStrandSelection',
dataType: "json",
async: false,
success: function (data) {
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: '',
height: 300
},
defaultView: 'basicWeek',
editable: true,
columnFormat: 'DD dddd',
events:
$.map(data.d, function (item, i) {
debugger;
var event = new Object();
event.id = item.eventId;
event.start = item.Start;
event.end = item.Endd;
event.title = item.Title
event.color = 'White';
event.allDay = true; //
return event;
}),
eventRender: function (event, element) {
//some code
});
}
});
$('#calendar').fullCalendar('option', 'height', 400);
}
});
I have inserted some new functions in my js but dayClick and eventClick don't work. The calendar is able to load properly though.
Any idea why the dayclick and eventclick in the following code is not working?
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
allDayDefault: false,
allDaySlot: false,
firstHour: 9,
defaultView: 'agendaWeek',
dayClick: function(date, allDay, jsEvent, view) {
calendar.fullCalendar('gotoDate', date);
},
eventClick: function(calEvent, jsEvent, view) {
window.location = "http://www.domain.com?start=" + calEvent.start;
},
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
false // make the event "stick"
);
var startDateString = $.fullCalendar.formatDate(start, 'yyyy-MM-dd hh:mm');
var endDateString = $.fullCalendar.formatDate(end, 'yyyy-MM-dd hh:mm');
$.ajax({
type: 'POST',
url: '{url}ajaxpost/add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: "{url}ajaxget/data",
});
});
You cannot use the "select" callback and the "dayClick" callback together as there is a conflict between the two. You can use datepicker to accomplish the gotoDate function to accomplish the same thing.
http://weblogs.asp.net/gunnarpeipman/archive/2010/02/02/linking-jqueryui-datepicker-and-fullcalendar.aspx
As for the eventClick Im not sure why it is not working, but it is easier to place the url in the database the call it in the events and just set it as the property "url: www.somesite.com/sdfjkiwe"
As a side note, It would probably wor better if you didn't use renderEvent to display your event. Try using the event function found here to use your ajax call within it.
http://arshaw.com/fullcalendar/docs/event_data/events_function/
This code is working in firefox but on IE 8 it returns nothing
<script type="text/javascript">
$(document).ready(function(){
var pageUrl = '<%=ResolveUrl("~/test/test.aspx")%>';
// Test
$('#<%=ddlTest.ClientID%>').change(function(){
var trgId = $(this+'input:checked').val();
$.ajax({
type: "POST",
url : pageUrl+ '/getRecs',
data : '{categ: "' +trgId + '"}',
contentType:"application/json; charset=utf-8",
dataType:"json",
success:function(msg)
{
bindCategories(msg)
}
});
});
});
$('#divLoad').ajaxStart(function() {
$(this).show();
});
$('#divLoad').ajaxStop(function() {
$(this).hide();
});
function bindCategories(msg)
{
if(msg.hasOwnProperty("d"))
alert(msg.d);
else
{
$('select[id$=<%=ddlTrg.ClientID %>] > option').remove();
$.each(msg, function() {
$('#<%=ddlTrg.ClientID %>').append($('<option></option>').val(this['Id']).html(this['Name']));
});
}
}
</script>`
This line doesn't look right?
var trgId = $(this+'input:checked').val();
this is an html element so you can't just use it like you are.
Do you mean something like:
var trgId = $('#' + this.id).val();
or
var trgId = $(this).find('input:checked').val();