FullCalendar Resource View - Week View w/Previous 3 Days Shown - javascript

I have provided a TimelineResourceView below as a reference as an example current setup.
Example: If Week View Sun-Sat Then anytime navigating forward/backward, always show week view with previous 3 days from week range. Then anytime navigating forward/backward, always show week view with previous 3 days from week range.
FullCalendar Example Timeline ResourceWeekView
https://codepen.io/motogeek/pen/yLLpjLV
I tried many different things from docs such as "visiblerange" and forcing dates with no success.
https://fullcalendar.io/docs/visibleRange
[Sun Oct 27 – Sat Nov 2] but they want to see [Thurs Oct 24 – Sat Nov 2] to show the previous 3 days.
calendar.setOption('visibleRange', {
start: '2019-10-24',
end: '2019-11-02'
});

Persistence paid off. I achieved a custom view using VisibleRange and with Moment javascript library. I answer this myself knowing this could be helpful for others formulating a custom view. Mine was focused on the timelineResourceViewm but should be able to apply to the other day/week views etc.
See CodePen:
Working Example Week View with Previewing Last 3 days (10 Day View)
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
timeZone: 'UTC',
header: {
left: 'today',
center: 'title',
right: 'resourceTimeline'
},
defaultView: 'resourceTimeline',
views: {
resourceTimeline: {
visibleRange: function (currentDate) {
// Generate a new date for manipulating in the next step
var startDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
var endDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
// Adjust the start & end dates, respectively
//10 Day WeekView PREV Thurs -> Sun-Sat
startDate.setDate(startDate.getDate() - 3); //Set Past (show back Thur)
endDate.setDate(endDate.getDate() + 7); // Set Future (standard week from Sun)
return { start: startDate, end: endDate };
}
}
},
slotLabelFormat: [{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }],
slotLabelInterval: { days: 1 },
editable: true,
resourceLabelText: 'Rooms',
resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
});
calendar.render();
document.getElementById('prev').addEventListener('click', function() {
calendar.incrementDate({ days: -7 });
});
document.getElementById('next').addEventListener('click', function() {
calendar.incrementDate({ days: 7 });
});
});

For anyone else coming across this. v5 now supports this as visible range.
https://fullcalendar.io/docs/visibleRange

Related

Fullcalendar v5 first day in dayGridMonth not working

I want set current date visible first. But it isn't working.
Documentation https://fullcalendar.io/docs/view-object
var calendarAll = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'today',
center: 'prev,title,next',
right: 'month30,dayGridMonth,timeGridWeek'
},
initialView: 'month30',
views: {
month30: {
type: 'dayGridMonth',
buttonText: 'month30',
//activeStart: new Date(), //Not working
visibleRange: function(currentDate) {
var startDate = new Date(currentDate.valueOf());
var endDate = new Date(currentDate.valueOf());
startDate.setDate(startDate.getDate() - 1);
endDate.setDate(endDate.getDate() + 29);
return { start: startDate, end: endDate };
}
}
},
});
How can I fix it? Fullcalendar v5, without jquery.
The "month" view provided by fullCalendar does not have this flexibility - it always starts at the beginning of the month, like a traditional paper calendar.
IMHO it would be confusing to many users if it appeared differently.
Other types of view are more flexible - they will respond to the visibleRange setting if you do not specify the time range in the view name, such as if you specify timeGrid rather than timeGridWeek for example.
Change type: 'dayGridMonth' to type: 'dayGrid'

Fullcalendar Now() Indicator positioned wrongly

In Fullcalendar, when setting the parameters
mintime
and
maxtime
the Now() indicators is not positioned properly.
I have a JSFiddle to show the issue.
In this Fiddle I would expect the indicator at the current date and time, however it is positioned at the top of the column of "yesterday"
Below is the code used in the fiddle
HTML
<div id="calendar"></div>
Javascript
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
height: 600,
nowIndicator: 'true',
minTime: "20:00:00", // this makes the calendar start at 8PM
maxTime: "44:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
})
Removing the
minTime
and
maxTime
parameters, makes the Now indicator position properly, as shown here
https://jsfiddle.net/8jndrp7m/2/
How can I position the Now indicator properly when using minTime and maxTime?
Or is this a bug?
i see multiple problems:
the now indicator doesn't need quotes, change 'true' to true,
If you want to extend the maxtime past midnight you can just put a 1. in front of the time, to set times the next day.So 8 in the morning on next day would be maxTime: '1.08:00:00'
If you start the calendar at 8 in the evening and its not 8pm yet (at least in my timezone) the now indicator will not show properly
The problem look like that you are set maxTime for next day which why it not working
If you like specify date to set max use validRange to set min & max date
$('#calendar').fullCalendar({
defaultView: 'agendaWeek', //agendaWeek
validRange: {
start: '2017-05-01',
end: '2017-06-01'
},
locale: 'nl',
timezone: 'local',
themeSystem: 'bootstrap3',
height: 600,
slotDuration: '00:10:00',
nowIndicator: 'true',
minTime: "17:00:00", // this makes the calendar start at 8PM
maxTime: "20:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
editable: true, // enable draggable events
droppable: true, // this allows things to be dropped onto the calendar
})

fullCalendar - Properties not being applied on first load

I have started looking at the fullCalendar package but am seeing some unusual behavior when I first load.
I have it setup as follows:
<div id='calendar'></div>
<script>
// Create FullCalendar Object
$j('#calendar').fullCalendar({
height: 650,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
</script>
However when I first launch the calendar it appears as follows:
Where some of the properties do not appear to have been fully implemented:
Height seems to be being ignored.
Now Indicator is visible, but is stuck at the first moment of the current day.
Business Hours only seem to show in all-day, none of the times are shown.
The rest of the properties seem to have been picked up.
The strange thing then however is that if I navigate to the previous week (or any other place in fullCalender, it then renders correctly as follows:
Has anyone else experienced this behavior or have any suggestions on where to start looking. I am trying to implement this on quite a large system but am pretty sure I have all my JQuery loading before the fullCalendar.js file.
do you have moment.js loaded before fullcalendar.js?
and check the versions are compatible.
the code snippet you have is working fine, I need to take a look at the businessHours var and AddWorkHours function to confirm that everything is fine.
if you check the example below you will see highlighted area (Monday - Friday start at 10AM to 6PM) that's the business hours in the example.
jQuery(document).ready(function($){
var businessHours = {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
};
$('#calendar').fullCalendar({
height: 666,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
function AddWorkHours(startDate, endDate){
alert('Selected Start Time is: ' + startDate);
alert('Selected End Time is: ' + endDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar-container">
<div id="calendar"></div>
</div>

Vis.js show only business hours in timeline

Not sure how to go about it but I'm using vis.js in my project and I need to display a timeline of the open hours of a business. Is there a way to show only the business hours and not the whole 24 hours as having evening hours is pointless for my application.
I cannot seem to find options in the documentation to make this setting in my code options.
The documentation you are looking for is the 'Hiding Periods' example: http://visjs.org/examples/timeline/other/hidingPeriods.html
To hide weekends you provide any weekend dates per:
To hide a weekend, pick any Saturday as start and the following Monday as end and set repeat to weekly.
To hide times outside of e.g. 9am to 5pm you provide a range of any arbitrary day with a start time of 5pm and a finish time of 9pm:
{
start: '2017-03-04 17:00:00',
end: '2017-03-05 09:00:00',
repeat: 'daily'
}
Here is a small example below:
var container = document.getElementById('timeline');
// sample timeline entry
var items = new vis.DataSet([{
id: 1,
content: 'foo',
start: '2017-06-13 10:00:00',
end: '2017-06-13 16:30:00'
}]);
// Configuration for the Timeline
var options = {
// hide weekends - use any weekend and repeat weekly
hiddenDates: [{
start: '2017-03-04 00:00:00',
end: '2017-03-06 00:00:00',
repeat: 'weekly'
},
// hide outside of 9am to 5pm - use any 2 days and repeat daily
{
start: '2017-03-04 17:00:00',
end: '2017-03-05 09:00:00',
repeat: 'daily'
}
],
// start and end of timeline
start: '2017-06-01',
end: '2017-06-30',
height: '140px',
editable: false
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
<h3>Mon-Fri 9am to 5pm working hours timeline example</h3>
<div id="timeline"></div>

jQuery Countdown - Change 0 Days Into Today

I'm working on countdown page using Keith Woods Countdown jquery plugin http://keith-wood.name/countdown.html. And this is what I have so far
$(document).ready(function () {
var segera = new Date();
segera = new Date(segera.getFullYear(), 2 - 1, 28);
$('.days').countdown({
until: segera,
layout: '{dn} {dl}',
timezone: +7
});
$('.hours').countdown({
until: segera,
layout: '{hn} {hl} {mn} {ml}',
timezone: +7
});
});
The question is, how can I change the day format? So, instead of displaying 0 DAYS, it will display TODAY.
Any help would really be appreciated...
//// EDIT
A facebook friend helped me. And here's what worked for me.
$(document).ready(function () {
var segera = new Date();
segera = new Date(segera.getFullYear(), 2 - 1, 28);
$('.days').countdown({
until: segera,
layout: '{dn} {dl}',
timezone: +7,
expiryText: "TODAY"
});
$('.hours').countdown({
until: segera,
layout: '{hn} {hl} {mn} {ml}',
timezone: +7
});
var hari = $('.days').text();
if (hari == "0 Days") {
$('.days').css('display', 'none');
$('.result').text('Today');
}
});
See jsfiddle
You can set the expiryText property to any string you want:
$(document).ready(function () {
var segera = new Date();
segera = new Date(segera.getFullYear(), 2 - 1, 28);
$('.days').countdown({
until: segera,
layout: '{dn} {dl}',
timezone: +7,
expiryText: "TODAY"
});
$('.hours').countdown({
until: segera,
layout: '{hn} {hl} {mn} {ml}',
timezone: +7,
expiryText: "TODAY"
});
});
Source (look for "expiryText")
You may need to set "alwaysExpire: true" in the parameters

Categories

Resources