I have implemented the fullcaleandar in angular and it is working fine. Usually the prev / next click will update the month/day/week views based on which tab is currently active. But I have custom buttons to increment or decrement week and day values. So I am trying to update the month alone in the fullcalendar prev and next buttons irrespective of the active view tab. ( only because I have other buttons to control the day/week views)
That means even if the calendar is in day/week view, if I am clicking the Fullcalendar next/prev buttons, the month value should increment/decrement -- not the day/week value.
Iam thinking about any option to send month data to the inbuild calendar api which is triggered while calling prev/next ? Is it possible to do so as per fullcalendar methods ?
Thanks.
It is actually not possible until you try rewriting some part of FullCalendar Code. The Fullcalendar documentation suggests that increment and decrement depends on the current view. Ideally, the use case (even the API provided by FullCalendar) suggests that, If month is the view then, 1 month is incremented. If is a week view, 1 week in incremented. You may try finding some workarounds but, I don't think there are any.
One suggested workaround is to:
Get the current date FullCalendar is displaying
Get the current View ('timeGridDay', etc.)
Then use the changeView method by incrementing the dateOrRange object
Related
I'm using FullCalendar and allowing the user to make selections to create off-times. Is it possible to allow selecting multiple days, but instead of the standard behavior:
select only the rectangle between the start and end time.
Desired behavior:
I'm OK with still having one Start date/time and one End date/time. I don't need an array of selections (one per each day selected) as I'm handling that fine in the backend already.
Using FullCalendar v3.9.0.
It's not possible to do this with FullCalendar as-is. I've changed the code to support such option.
Please refer to the following issue, in the initial message a Patch is attached for v3.9.0 of the calendar:
https://github.com/fullcalendar/fullcalendar/issues/4119
I have designed a scheduler using Kendo UI. Now my problem is every time, the calendar is loading from 1st of the month but I want it to load from the first day of the week which has schedules.
For example in the below image it should load from 2nd of the month rather than 26th of the previous month.
I have tried the following,
In the dataBound event I have used jquery to hide the top row.
$('.k-scheduler-table').find('tr')[0].remove()
But I want 6 rows every time and when the top row is removed I want the next week to be added below. Please suggest me some way to achieve this.
Note: I am a newbie to Kendo UI, Sorry if I am wrong some where.
The KendoUI scheduler does not allow the type of view for which you are looking. Currently, the scheduler supports the following view types: "day", "week", "workWeek", "month", "agenda", "timeline", "timelineWeek", "timelineWorkWeek" and "timelineMonth".
If you want to view the calendar events starting with the first day that has events, I suggest that you check out the "agenda" view type.
In your example, however, you have selected the "month" view. In general, calendar apps show all days of a month in the "month" view, even if that requires the calendar to show days from the previous month. Kendo is trying to mirror that general pattern.
The type of view you are looking for is interesting, but I've never seen it done anywhere, so I unfortunately doubt that Kendo is going to support it.
The Kendo Scheduler has several built-in views but it also allows you to make your own custom views and even extend the built-in ones.
You can see a demo here.
In the Razor you can bind view starttime also can be set from jQuery f.e.
.Views(views =>
{
views.TimelineMonthView(timeline =>
{
timeline.StartTime(Model.StartTime);
timeline.EndTime(Model.EndTime);
timeline.MajorTick(1440);
timeline.Selected(true);
timeline.EventHeight(10);
});
})
We are making a web application where users can create theire own calendars. They should be able to create multiple calendars (all in view agendaDay) on one page. There are external events that have to be dropped on the calendars to make appointments. Everything we want to do is working like a charm!
But we have 1 problem and we can't seem to get a solution for it.
We have a second (month) calendar (dynamicly created) and we are using this calendar to navigate between days. When a user clicks on a day we use gotoDate to change the FullCalendars day.
This is where the problem comes in. When we use gotoDate on all the calendars on the page it's not possible drop the external events on the first calendar. Dropping the events on de second or third calendar is not giving any problems.
What i have seen is that the fullCalendar gets destroyed in the renderView function in the fullcalendar.js on line 724 (version 2.2.6). After this the fullcalendar has been rendered again.
When i uncomment the destroy the problem is solved but then ofcourse the drop event gets initialized for second time (or third, or fourth).
I'm unable to find a solution so trying to find some help for this.
See my code on: http://jsbin.com/pubelo/1/
I have also submitted this to the FullCalendar issue tracker but i'm trying to find a fast solution for now.
Update 1
Still looking into the FullCalendar.js code. I have noticed that the problem is solved when i remove line 6414 in the destroy function.
this.el.empty();
But removing that line results in double javascript events.
Update 2
Changed the jsbin link.
Update 3
I have noticed that the handler 'documentDragStart' isn't called on the first calendar when using the gotoDate.
Update 4
Problem turns out to be in "var Grid = fc.Grid = RowRenderer.extend({" unbindHandlers function.
Because the seconds calendar is calling the unbindHandler after the first calendar called the bindHandlers the dragstart has been removed and only applied once (to the last calendar).
Haven't found a solution tho...
Workaround / solution
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Update
Problem had been fixed by Arshaw and released in the newest version 2.3.0.
I'm working on a project where the user has to be able to add or edit hours that he will work or worked. The dataset I'm using for this I retreive from ASP.net / MVC 4. What is the best way to check if the user added new data to the table or edited some data?
Example: The user loads the page, the calender is set to the current date --> table shows 3 weeks. Previous week, this week and next week. The dataset load in the hours that were retreived from ASP.net. The user adds new hours and edits some hours. Then the user clicks on the button to go to the next week. The data entered by the user has to be compared with the retreived dataset. The dataset has to be saved, this will happen in ASP.net. But after the save the browser gets the data of the next week and the calendar has to be for the next week.
The data added / edited by the user has to be saved but I have to know if this is edited or added. What is the best way to do this?
The retreived dataset = a string? Could I compare this by just comparing 2 strings? remove enters, spaces, ...
Is there a library to compare datasets in jquery?
To show the next week I think the page cannot be refreshed? Correct?
Any other suggestions are welcome.
I'm not quite sure on what you're going at here, however a suggestion might be to either have a save button on each page or hook up a event for whenever the input looses focus (or whatever you're using for selecting hours etc).
For the latter suggestion it would require more javascript, for example each input that's rendered could have data attributes of which year, month, and day it represents so it can be used when posting a change.
If you however prefer to submit the whole "dataset", you should checkout modelbinding if you're not already fimiliar with it, then either post the collection when clicking save or changing page.
Scott Hanselmans article on how the default modelbinder works might be of any help.
I'm looking for a way to get the current pagedate. I know how to get the original config or even how to subscribe to changePageEvent and get it while scrolling, but neither covers a case when someone opens the calendar scrolls through few months and then closes and re-opens, I need the pagedate for that page. There has to be a property that records that, but can't find in the API.
Here is an example of a popup calendar that remains on the last calendar page viewed, even if a date isn't selected. Browse to a month and close the calendar using the "x" in the corner. When you click the button to display the calendar again you'll find it's on the same page you last navigated to:
Calendar Control: Popup Calendar - Basic
I don't see any code in the example source code that sets the date, so in the absence of your source code I'll have to guess that you're instantiating a new calendar each time you show it.
To get the month/year displayed use the pagedate property.