Get details of days of week using fullcalender - javascript

I want to get a detail (only date of week) of days of a particular week using fullCalender control.
I am getting detail of particular day only but i want a detail of whole 7 days of particular week. If I change week from 18 to 15 then data should be change.

To get the start-/enddates for a particular week you can use the viewRender callback to retrieve the information.
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
viewRender: function(view, e){
console.log(view.start, view.end);
}
});
This code will log the start & enddates in console when you change weeks.

Related

JavaScript RRule - how to get "all the dates for Monday, Tuesday and Friday of 3rd week of every month for 10 counts starting from any certain date"

Hi dear stackoverflow community people, need your help in a problem.
I am using rrule JavaScript lib to generate event dates for calendar. Below is the example condition for which I want event dates.
freq: Monthly
startDate: 1 Nov 22, 6AM
count: 10
weekdays: Mon, Tuesday, and Friday
now what other inputs/parameter should I give to rrule so that it generates dates only for 3rd week of the month? (Basically, I want event to occur in every specified week (first, second, third, fourth, last) of every month in the give date range or number of counts).
please tell me if and how is it possible through rrule only or if this can be achieved using any other way or other lib along with rrule.
Thank you in advance.
Please ask if have any question or need clarity.
Initially, I tried bysetpos but then realise that it gives nth number of the day I selected (for example bysetpos:1 and byweekday: Mon will give every first monday of the month)

Returning to calendar in month view always goes back one month,

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".

Daypilot C# Get Selected Day

I am building a master rota using Daypilot. I only care about Monday -Sunday. I don't care about DATES, just DAYS. E.G a shift created on a Monday between 2-4 will be there every Monday between 2-4.
I am using the TimeRangeSelectedJavaScript to call the modal popup
Is there a way using this javascript to get the selected DAY.
E.G if they try and create a appointment on the weekly calender on a Monday, then "Monday" can be passed through?
TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="timeRangeSelected(start, end,$('#MainContent_DropDownList_Week').val(), $('#MainContent_DropDownListLocationMasterRota').val());"
You can get the day of week from the start/end variables:
var startDow = start.getDayOfWeek();
var endDow = end.getDayOfWeek();
Both start and end variables hold a DayPilot.Date object. See also DayPilot.Date.getDayOfWeek().
Your example modified:
TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="timeRangeSelected(start.getDayOfWeek(), end.getDayOfWeek(), $('#MainContent_DropDownList_Week').val(), $('#MainContent_DropDownListLocationMasterRota').val());"

datepicker add a day to the end date

Appreciate any help. Have searched many pages on this forum about Javascript datepicker dates. They all include two textbox calendars and not a compound bootstrap one.
I have a compound calendar (one input and a popup comes up displaying two boxes for from and to date and an apply button). When I search, it works, as long as the date I am searching for doesn't end on the date I am searching, for example, searching for 06/12/2015-06/18/2015 will not include results from the 18th June (06/18/2015). This is also the case if I enter the same date for start and end dates.
SUMMARY: need a way to set "start" and "end" so that I can add a day to the "end" day:
$('#picup-range').on('apply.daterangepicker', function(start, end) {
submitFilter();
});
function submitFilter() {
$('#filter').submit();
}
Ended up having to change Java database query that provided the data.

how can you figure out the week from a single date

I am building a project and in that project the user is going to input a date eg. 8/2/2011. then i am going to show them the information for the week that contains 8/2/2011. How can you figure out which week to show? for this project i am using javascript, jquery, and php.
You should be able to do what you want by getting the first day of the week the given date occurs in.
If your weeks start on Monday:
Date.prototype.lastMonday=function(){
var d= new Date(this), weekstart= 1;
while(d.getDay()!== 1) d.setDate(d.getDate()-1)
return d;
}
alert(new Date().lastMonday())
//returns the current date if does fall on a Monday
If you want to know the days that compose the week you can just find out the day of the week and show the appropriate days before and after. To know the day of the week just use the getDay method of the Date object(see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/getDay). For more info on the Date object see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date.

Categories

Resources