I have a fullcalendar defaults to week view. Current day is highlighted. There is another external event div from where an event need to drop on the calendar. This things works as designed. There is also a custom button clicking on which event should be added on the calendar. By default it drops on current date. But when user changes week, navigate to next or previous week, no day is selected.
I want to not only select every 7th day (+7 for next or -7 for previous) to be default day and change its color.
Difficult to provide full code, but here it, run the following link and set the view to week view. When you open week view, Friday 26th is current day and selected. When user navigate to Prev or next, I want to 2nd Nov or 19th Oct be the default day and be highlighted (color)
https://fullcalendar.io/docs/external-dragging-demo
I have tried few things without any success:
$('.fc-prev-button').click(function(){
//currCalDate is global variable to store the current day
currCalDate.setDate(currCalDate.getDate() - 7);
console.log(currCalDate);
$('#calendar').fullCalendar('gotoDate', currCalDate);
});
$('.fc-next-button').click(function(){
currCalDate.setDate(currCalDate.getDate() + 7);
$('#calendar').fullCalendar('gotoDate', currCalDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then tried using dayRender in FC definition or may be something can be done with viewRender?
dayRender: function (date, cell) {
var today = new Date(currCalDate);
date = moment(date).toDate();
if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}
},
Here, you can check the code for next 7th day highlight:
dayRender: function (date, cell) {
var today = new Date();
date = moment(date).toDate();
dateFromplus = moment().add(7,'d').format('YYYY-MM-DD');
$(".fc-day[data-date='"+dateFromplus+"']").css("background-color", "red");
dateFromminus = moment().subtract(7,'d').format('YYYY-MM-DD');
$(".fc-day[data-date='"+dateFromminus+"']").css("background-color", "red");
}
For more fullcalendar info : fullcalendar hacks
Related
I'm having difficulty getting my users to return to the month they were working in after a change is made.
Currently, I have a function that initializes the calendar.
var iv = localStorage.getItem("fcDefaultView") || 'timeGridWeek';
var id = localStorage.getItem("fcDefaultDate") || new Date;
initialView: iv,
initialDate: id,
datesSet: function (dateInfo) {
localStorage.setItem("fcDefaultView", dateInfo.view.type);
localStorage.setItem("fcDefaultDate", dateInfo.startStr);
},
What is strange is that, when the user is in any view other than monthView, everything works fine. But when in monthView, when they return to the calendar, it displays the previous month.
The issue you've got with the month view is that the "start" date of any month view in fullCalendar is often a day or two before the start of the month. For example if you open fullCalendar month view for the current month (August 2021) you'll see that the first date displayed on the calendar is 27th July. So if you log dateInfo.startStr as you're adding it to the localStorage, you'll see that for August 2021 (again for example) it'll save 27th July 2021.
However if you then set that as the initial date next time you load the calendar, fullCalendar then sets the view to the month which the date occurs in.
To solve this, rather than using the date provided directly in the datesSet callback, you can get the "currentStart" value from the view object, which is the start of the interval the view is trying to represent, rather than the start of the visible time period. This distinction only really applies in month view, so it has no impact on the already-working behaviour other views.
Change the setItem call to this:
localStorage.setItem("fcDefaultDate", dateInfo.view.currentStart);
As this is a JS Date object which then gets serialised, rather than an ISO string, you need to explicitly parse it when reading it out again, so another small change is required:
var id = Date.parse(localStorage.getItem("fcDefaultDate")) || new Date();
Demo: https://codepen.io/ADyson82/pen/JjNrMBd
Documentation: https://fullcalendar.io/docs/view-object
It's because the month starts from 0, not 1. so January is "0" and February is "1".
I have a datepicker plugin where I get the day of the week (so far everything is fine and working). If I click again in the week field, the datepicker opens, but the selected day is today's (the current day). What I want is when I click in datepicker, its select the first day of the week select (Monday).
For example, if I have chosen the week 28 of 2017, I want the day July 10, 2017 to appear selected when I click the datepicker
You can try a simple logic.
Accept week number and multiply it by 7. You will have nth day.
Create a variable (baseDay) that will hold the day to be selected.
Create a date object for this day.
Now fetch the day of this date and subtract baseDay from it. You will get number of days to subtract to get necessary date.
Subtract those days and you have your date.
function getStartOfWeek(weekNo) {
var baseDay = 1; // For Monday
var today = new Date();
var date = new Date(today.getFullYear(), 0, weekNo * 7);
var day = date.getDay();
console.log(date, date.getDay())
if (day > baseDay)
date.setDate(date.getDate() - (day - baseDay))
console.log(date, date.getDay())
}
getStartOfWeek(28)
Note: this is not the complete solution. Above logic is to get the necessary date. Once you have a date, you will have to set it to the datepicker. This part will be specific to plugin used and can be incorporated easily.
In google scripts I know there are triggers to run by date, but I don't think that will work because month's have different amounts of days. So I was wondering if there's a way to set a trigger to run at 11PM on the last night of each month, no matter if that's a 30 or a 31.
Thanks
First create a trigger from project Edit > current project's trigger or register it programmatically that will run every day at 11 pm.
ScriptApp.newTrigger("myTriggerFunction")
.timeBased()
.atHour(23)
.everyDays(1)
.create();
Then in your trigger handler, check if today is the last day of the month, then do your work.
function myTriggrFunction()
{
var today = new Date();
var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth()+1, 0);
if(today.getDate() == lastDayOfMonth.getDate() )
{
// your work to be done
}
}
I'm using this version of Bootstrap DatePicker: http://eternicode.github.io/bootstrap-datepicker/ (the range type), and i have uploaded my demo on JSFiddle on here: http://jsfiddle.net/qs5co179/6/
The relevant JavaScript:
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yyyy",
minViewMode : 1
});
I have set the parameter minViewMode : 1 so I can view only months on calendar instead of full days, the reason is that I want to strict the user to enter:
1st day of the month in: input name="start"
and strict them too to enter only the last day of the month in: input name="end" (but the default is always 1st day of the month when you click)
For example my data entry that i am looking for like below:
From: 01/07/2015 - To: 30/09/2015.. in this format (dd/mm/yyyy)
Now I can't find any parameter to set the calender to pick the last day of the month instead of always 1st day when you click on the month in "To:" field.
one more thing also that I want to always make "From:" and "To:" having 3months period and no less, I want always to make the range 3 months minimum for the entery.
Thanks a lot in advance...
You could attach an event handler to the changeDate event (doc), and change the date manually (i.e. add a month, substract a day).
For the date handling part, I would
Get the date parts
Increase the month by one, if its December, then change it to January
Create a new Date instance
date = date.setDate(date.getDate() - 1) to get the correct day
The date parts could be exctracted by simple string slicing:
var day = str.slice(0,2);
var month = str.slice(3,5);
var year = str.slice(6,10);
I have two calenders in my page which is implemented using full calender jQuery plugin.
I need to load calenders like left present calender and right upcoming month calender.Like if present is November then right calender should be december. Which i was able to do so by giving dates.
But i have two navigation arrows to navigate the calender at both left and right to these calenders. How can i get dynamic next month and year and vice-versa ie prev month and prev year provided a month and year.
I found a way to get current current month and year using moment.js which will handle leap year and all...
Below is the code so far to get current date. I need to know how can i get prev month and year and next month and year on navigation clicks.
Code:
var eNow = new Date();
var eMoment = moment(eNow);
var leftEMonth = eMoment.format('MM')-1;
var leftEYear = eMoment.format('YYYY');
Months:
moment().add(1, 'months');
Years:
moment().add(1, 'years');
So for example your next month button would look like this:
$('#nextMonthBtn').click(function () {
eMoment.add(1, 'months');
});
assuming eMoment is in scope of course.