I am trying to set the background color of an event with FullCalendar JS http://arshaw.com/fullcalendar/
Here is my JS:
<script>
$('#calendar').fullCalendar({
events: [
{
title: 'Test',
start: '2014-08-07',
url: '#',
backgroundColor: '#FF0000',
editable: true
},
]
});
</script>
And here is what that produces
Why is it not producing the result I want, the event background colored as red.
You can change the backgroundColor property for your events like:
$('#calendar').fullCalendar({
{
title: '1',
start: new Date(2014, 02, 25, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#ED1317'
},
{
title: '2',
start: new Date(2014, 02, 26, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#ED1317'
},
...
});
For the other dates, just use the .fc-future and .fc-today CSS properties :
.fc-future,
.fc-today {
background-color: #10CC55;
}
Updated :
$('#calendar').fullCalendar({
eventSources: [
{
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
}
],
backgroundColor: '#ED1317'
}
]
Related
I was wondering if anyone has any experience with using Fancygrid.js and a date picker? Their docs aren't bad, but I'm not seeing any examples that would help me pass params like last 30 days or last month, etc.
I currently have this as my code:
new FancyGrid({
title: 'Report',
renderTo: 'newTable',
data: data,
theme: 'bootstrap',
// width: 'fit',
// height: 'fit',
paging: true,
trackOver: true,
selModel: 'row',
paging: {
pageSize: 10,
pageSizeData: [5,10,20,50],
refreshButton: true
},
tbar: [{
type: 'search',
width: 350,
emptyText: 'Search',
paramsMenu: true,
paramsText: 'Parameters'
}],
defaults: {
type: 'string',
sortable: true
},
columns:
[
{
index: 'theDate',
title: 'Date',
type: 'date',
width: 150,
resizable: true,
filter: {
header: true
},
// menu: [{
// text: 'Clear Filter',
// handler: function(menu){
// var grid = FancyGrid.get('newTable');
// grid.clearFilter('theDate');
// menu.hide();
// }
// },'-',{
// text: 'Less than 30',
// handler: function(menu){
// var grid = FancyGrid.get('newTable');
// grid.clearFilter('theDate');
// grid.addFilter('theDate', 30, '<');
// menu.hide();
// }
// },{
// text: 'More than 35',
// handler: function(menu){
// var grid = FancyGrid.get('newTable');
// grid.clearFilter();
// grid.addFilter('theDate', 35, '>');
// menu.hide();
// }
// }],
}, {
index: 'MessagesSent',
title: 'Messages',
width: 80,
resizable: true
}, {
index: 'Clicks',
title: 'Clicks',
width: 150,
resizable: true,
type: 'number',
}, {
index: 'Upload',
title: 'Upload',
width: 150,
resizable: true
}, {
index: 'UploadRate',
title: 'Upload Rate',
width: 150,
resizable: true
}, {
index: 'enter',
title: 'Enter',
width: 50,
resizable: true
}, {
index: 'EnterRate',
title: 'Enter Rate',
width: 150,
resizable: true
}
],
});
});
I have the menu commented out right now, but I want to show filtering options for the last 30, 60 and 90 days if possible. My JSON is coming through like this:
{
MinTrackingEventID: '14864641',
MaxTrackingEventID: '14888303',
theDate: '02-28-2019',
Clicks: '36.000000000',
Upload: '2.000000000',
Enter: '0.000000000',
UploadRate: '0.05555555555555555555',
EnterRate: '0.00000000000000000000',
MessagesSent: '0'
},
Any and all help is appreciated.
You need to construct the date that you want to compare against and pass this in into the addFilter() statement:
menu: [{
text: 'Clear Filter',
handler: function(menu){
grid.clearFilter('theDate');
menu.hide();
}
},'-',{
text: 'Less than 30',
handler: function(menu){
grid.clearFilter('theDate');
var date = new Date();
date.setDate(date.getDate() -30);
grid.addFilter('theDate', date, '>');
menu.hide();
}
},{
text: 'More than 35',
handler: function(menu){
grid.clearFilter('theDate');
var date = new Date();
date.setDate(date.getDate() -35);
grid.addFilter('theDate', date, '<');
menu.hide();
}
}],
...
Here is a Fiddle of the above code.
I also removed the repeated calls inside the menu ...
var grid = FancyGrid.get('newTable');
and instead assigned the return value of the grid initialisation to a variable:
var grid = new FancyGrid({
...
});
I am using full-calendar from fullcalendar.io and having some trouble customizing its time slot.
I want to add time slots like breakfast, lunch, dinner etc also user can add his/her own slots. How do I set the fixed height according to the number of slots? Also, I want to set the slot column text for breakfast, lunch etc. not 12 am, 6 am. Here's what I did until now:
var today = moment();
$('#calendar').fullCalendar({
droppable: true,
defaultView: 'Week',
header: false,
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
/*events: [
{
title : 'event1',
start : today,
imageurl:'assets/images/recipe/salad.jpg'
}
],*/
/*views: {
agendaWeek: {
agendaEventMinHeight: 150,
allDaySlot: false,
slotLabelInterval: { hours: 6},
slotDuration: { hours: 1},
duration: { days: 7}
}
},*/
eventRender: function (event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
var new_description = '#';
element.append(new_description);
},
now: today,
/*header: {
left: 'promptResource',
center: '',
right: ''
},*/
footer: {
left: 'promptResource',
center: '',
right: ''
},
customButtons: {
promptResource: {
text: '+ add course',
click: function() {
var title = prompt('Course name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
views: {
Week: {
type: 'timeline',
duration: { Days: '7' },
slotLabelInterval: { hours: 24},
slotDuration: { hours: 24},
}
},
resourceLabelText: 'Meal',
resourceRender: function(resource, cellEls) {
cellEls.on('click', function() {
if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
$('#calendar').fullCalendar('removeResource', resource);
}
});
},
resources: [
{ id: 'a', title: 'Breakfast' , eventColor: 'red'},
{ id: 'b', title: 'Lunch', eventColor: 'green' },
{ id: 'c', title: 'Dinner', eventColor: 'orange' },
{ id: 'd', title: 'Other', eventColor: 'grey'},
],
events: [
{ id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<div id="calendar"></div>
Any help would be really appreciated.
Edit:
Here's what I actually want to implement.
In design, you can see that the time of the day is not important. I want the users to add as many meals a day as they can. I just a want the option to add the meal's title(event). And remove the time slots on the left side.
update:
I've managed to solve this problem to some extent. Here's how it looks now:
But still, there are some problems like how can I change the date format in columnHeader and how can I give fix size to row and columns?
I have the following code which works in FullCalendar v2.4.0:
$('#calendar').fullCalendar({
header: {
center: 'title',
left: 'nothing',
right: 'nothing'
},
selectable: false,
defaultView: 'month',
titleFormat: 'MMMM',
events: [{
start: "2018-03-01",
end: "2018-03-01",
rendering: "background",
color: "red"
}]
});
https://jsfiddle.net/5x2dL5Ls/74/
How could I do the same but with FullCalendar v1.6.0? (I have to do it with that version :-/)
I use FullCalendar to generate my agenda with 3 sections each day. I add attribute groupByDateAndResource and resources like there:
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
My calendar show perfectly, but my columns doesn't divided in 3 sections. See image
How can I make divide all my days in sections with FullCalendar.js?
Thanks!
SOLUTION:
I installed extension scheduler.js. This extension of FullCalender display all my resources exactly like I want.
You need to do like this, This is in header, and in body you will have to divide cells again.
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
groupByDateAndResource: true,
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
you have to put groupByDateAndResource: true
https://fullcalendar.io/docs/v3/groupByDateAndResource
I try to integrate a calendar template in my system.
At demo js file, example events are written like this:
events: [
{
id: 1,
title: 'Title 1',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 2,
title: 'Title 2',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
}
I need to get this data from mysql. I wrote the php script, it gives me the result at json format. But I don't know the way of loading results into .js file.
I know it's a simple question. Thanks for your time.
Here is the all .js file:
$(function() {
// fullcalendar
fullcalendar.calendar_selectable();
});
fullcalendar = {
calendar_selectable: function() {
var $calendar_selectable = $('#ajanda'),
calendarColorsWrapper = $('<div id="calendar_colors_wrapper"></div>');
var calendarColorPicker = helpers.color_picker(calendarColorsWrapper).prop('outerHTML');
if($calendar_selectable.length) {
$calendar_selectable.fullCalendar({
header: {
left: 'title today',
center: '',
right: 'month,agendaWeek,agendaDay prev,next'
},
buttonIcons: {
prev: 'md-left-single-arrow',
next: 'md-right-single-arrow',
prevYear: 'md-left-double-arrow',
nextYear: 'md-right-double-arrow'
},
buttonText: {
today: ' ',
month: ' ',
week: ' ',
day: ' '
},
aspectRatio: 2.1,
defaultDate: moment(),
selectable: true,
selectHelper: true,
select: function(start, end) {
UIkit.modal.prompt('' +
'<h3 class="heading_b uk-margin-medium-bottom">Etkinlik Ekle</h3><div class="uk-margin-medium-bottom" id="calendar_colors">' +
'Etkinlik Rengi:' +
calendarColorPicker +
'</div>' +
'Etkinlik:',
'', function(newvalue){
if($.trim( newvalue ) !== '') {
var eventData,
eventColor = $('#calendar_colors_wrapper').find('input').val();
eventData = {
title: newvalue,
start: start,
end: end,
color: eventColor ? eventColor : ''
};
//kaydediyorum
var datastring='do=kayit&title='+eventData.title+'&start='+(eventData.start)+'&end='+(eventData.end)+'&color='+(eventData.color);
$.ajax({
type: "POST",
data: datastring,
url: "script/ajax_calendar.php",
dataType: "html"
});
$calendar_selectable.fullCalendar('renderEvent', eventData, true); // stick? = true
$calendar_selectable.fullCalendar('unselect');
}
}, {
labels: {
Ok: 'Kaydet'
}
});
},
editable: true,
eventLimit: true,
timeFormat: '(HH)(:mm)',
events: [
{
title: 'Tüm Gün Aktivitesi',
start: ('2016-01-01')
},
{
id: 1,
title: 'Uzun Aktivite',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 1,
title: 'Saatli olan',
start: ('2016-01-07 15:00'),
color: 'brown'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(8, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(15, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
title: 'Konferans',
start: moment().startOf('day').add(14, 'hours').format('YYYY-MM-DD HH:mm'),
end: moment().startOf('day').add(15, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Meeting',
start: moment().startOf('month').add(14, 'days').add(10, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Lunch',
start: moment().startOf('day').add(11, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#d84315'
},
{
title: 'Meeting',
start: moment().startOf('day').add(8, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Happy Hour',
start: moment().startOf('month').add(1, 'days').format('YYYY-MM-DD')
},
{
title: 'Dinner',
start: moment().startOf('day').add(19, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Birthday Party',
start: moment().startOf('month').add(23, 'days').format('YYYY-MM-DD')
},
{
title: 'NEW RELEASE (link)',
url: 'http://themeforest.net/user/tzd/portfolio',
start: moment().startOf('month').add(10, 'days').format('YYYY-MM-DD'),
color: '#0097a7'
}
]
});
}
}
};
The easiest way is to change your php script to output the JSON data as a js variable.
// output the data like this
header("Content-Type: application/javascript");
$data = json_encode($data_array);
echo "var events_json = $data;";
exit;
Then include the php script as a javascript in your webpage, above the main code.
<script src="myScript.php"></script>
Then you can just use the variable name in your main javascript without loading anything async.
events: events_json
You could try this:
$(document).ready(function () {
var = 'test';
$.ajax({
type: "POST",
url: "yourservice.php",
data: {
var: var
},
success: function (response) {
console.log(response);
var decodedJson = JSON.parse(response);
console.log(decodedJson);
}
});
});