How can I customize full calendar Particular day's color. (For Example, I want to set red as background color for all Friday in a month)
You can try this:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
},
defaultView: 'month',
dayRender: function ( date, cell) {
if (moment(date).weekday() == 5) {
cell.css("background-color", "red");
}
},
});
});
https://jsfiddle.net/wke7w839/
Related
I have installed fmstarting point solution and it has a calendar done by java.
How can I change default weekends from sat sun to other days?
The code is down below.
BR
Dino
// This is where you can change the settings for your calendar.
var calendarEl = document.getElementById('calendar');
var calendar;
var initCalendar = function() {
calendar = new FullCalendar.Calendar(calendarEl, {
//Custom Button to add task
customButtons: {
FMNewTask: {
text: '+ Add Appointmen',
click:
function() {
var focus = calendar.getDate().toISOString();
doThis = NewTask(focus, '(0882)NewTask');
}
}
},
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'FMAdd,FMNewTask',
center: 'title',
right: 'prev,next today' //More options: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: '**VIEW**',
defaultDate: '**DefaultDate**',
navLinks: true, //Can click day/week names to navigate views.
editable: true,
eventLimit: true, //Allow "more" link when too many events
locale: 'en', //To change the locale. Examples: en-gb, fr, zh-tw
slotDuration: '00:30:00',
slotLabelInterval: '00:60:00',
minTime: '10:00:00',
maxTime: '19:00:00',
scrollTime: '06:00:00',
nowIndicator:true,
weekends:true,
businessHours: false,
businessHours: { daysOfWeek: [6,0,1,2,3,], // enable all days
startTime: '10:00',
endTime: '19:00',
},
I am using Angular JS and FullCalendar control for one of my requirement.
My code for full calendar in Angular JS is as below:-
<div ui-calendar="uiConfig.calendar" ng-model="eventSources" id="calendar"></div>
$scope.uiConfig = {
calendar: {
editable: true,
header: {
left: 'title',
center: '',
//right: 'today prev,next'
right: 'today next'
},
aspectRatio: 1.25,
selectable: true,
events: $scope.eventsselection,
dayClick: $scope.dayClick,
validRange: function (nowDate) {
return {
start: nowDate.clone().subtract(1, 'days'),
};
}
}
};
I want to add my custom business logic when user clicks on "today" button at top right. How to achieve this?
You can define a customButton with the text 'Today'
customButtons: {
myTodayButton: {
text: 'Today',
click: function() {
/* Add custom logic here */
$('#calendar').fullCalendar('today'); //will change calendar to today
}
}
},
In order to be able to see this button you must add it to the header option instead of the today option
header: {
left: 'title',
center: '',
right: 'myTodayButton next'
},
After having read the fullcalendar docs, I thought setting a month attribute in calendar in $scope.uiConfig as below would do it. But I can't understand where exactly I set the month attribute in.
$scope.uiConfig = {
calendar: {
firstDay:1,
month: 0,
year: 2018,
height: 220,
aspectRatio: 1.09,
editable: true,
header:{
left: 'title',
center: '',
right: ''
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
month: 3
}
};
Fixed the issue. I used the attribute 'defaultDate' instead of 'month'. This has been updated based on the fullcalendar docs here. It accepts any moment date. For example:
$scope.uiConfig = {
calendar:{
defaultDate: "2018-10-01"
}
}
I/m working with AngularUI calendar.My task is add some data to Calendar cells with CSS Styles.
I haven't any idea about that,beacause I'm new to AngularJS.
Please help me.
Thanks.
My Angular Code
$scope.uiConfig = {
calendar: {
height: 500,
editable: true,
header: {
left: '',
center: 'title',
right: 'prev next'
},
defaultView: 'month'
}
};
Try this kind of effort with dayRender function. You can add html elements to your calendar using cell.html
With my answer all cells fill with same styles and other HTML Elements.Then you can customize it with your back-end array.
Try this
$scope.uiConfig = {
calendar: {
height: 500,
editable: true,
header: {
left: '',
center: 'title',
right: 'prev next'
},
defaultView: 'month',
dayRender: function (date, cell) {
$r = $scope.getDateInfo(date);
if($r){
cell.css("background-color", "#e6f7ff");
}
cell.html('<b>'+$r.amount+'</b>');
}
}
};
$scope.getDateInfo = function(date){
return {
amount : 50000
}
}
You can add in-line styles or classes to HTML elements.
In this I used another function.Please refer my code and any further matter simply leave a comment.
fiddle
Cheers!!
I'm working on project and I'm using NVD3 lineChart, and I couldn't edit chart's grid.
This is the chart's options:
chart: {
type: 'lineChart',
height: 430,
margin: {
top: 20,
right: 20,
bottom: 80,
left: 40
},
x: function (d) {
return d.x;
},
y: function (d) {
return d.y;
},
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Date',
showMaxMin: false,
tickFormat: function (d) {
return d3.time.format('%b %d')(new Date(d));
},
reduceXTicks: false,
ticks: 13
},
yAxis: {
axisLabel: 'People count',
tickFormat: function (d) {
return d3.format('1d')(d);
}
}
},
title: {
enable: true,
text: 'People count Vs Date'
}
I want to have 7 grid x-axis if there're 7 values for example.
Notice: By editing ticks value to any number the grid doesn't change.
And this is the current chart
https://www.dropbox.com/s/yfin991k0ovycnv/chart.png?dl=0
So, how can I edit chart grid?
The lineChart model exposes the axis as xAxis and yAxis, and those have options on them as well. For instance, you can do:
var chart = nv.models.lineChart();
chart.xAxis.ticks(1);
chart.yAxis.tickVAlues([1,2,3,4,5]);
Most of those options are based on D3 options, for the above example see:
https://github.com/mbostock/d3/wiki/SVG-Axes#ticks (tickValues is right below that one)
For a full list of axis options in nvd3, see the documentation from the community fork here:
https://nvd3-community.github.io/nvd3/examples/documentation.html#axis