FullCalendar does not display past events. How to store lastCreatedEvent date? - javascript

Whenever i insert an event and that day passes it just disappears from my calendar. I have a different page where i load all the events and they're still there so they are not being removed from the database.
There must be a check somewhere in the FullCalendar code which makes it that it doesn't display dates < $today. I have no clue on where to start looking, is there anyone who had the same problem as me? How did you manage to fix it? Thank you for reading my question.
Also, how would i go about storing the last created event day? For example, i want to create a function which brings the users to my event created in August instead of today's date.
$('#calendar').fullCalendar( 'gotoDate', LASTCREATEDDATE );
I need it to update whenever somebody creates a new event.
I looked for different functions on how to achieve this but i'm not quite sure how to do this.

Your problem is that you are not getting the right events to be showed.
As you can read here FullCalendar is going to send the following URL to the server:
/myfeed.php?start=2013-12-01&end=2014-01-12&_=1386054751381
So you have to select from your database the events which EventStartDate <= end && EventEndDate >= start
About your second question you should use something like SignalR or WebSockets if you want the calendar of your users to be updated as soon you create a new event.

Related

Change value of input field on another field's blur event in Strapi

I've been struggling with the docs of strapi for this.
There's a collection of articles. When creating an article, there are 2 fields i.e Start Date and End Date. Now when a value of Start Date changes and user is done selecting an event, I want to update the value of End Date 6 months from that.
Ofcourse the calculations of value are not a problem but I'm unable to find anything to update the value on blur event.
Right now, I'm using beforeCreate and beforeUpdate lifecycle hooks but all these hooks mentioned in strapi doc run when a user clicks Save button.
This might solve the case but this is not an idea scenario for a user coming from Wordpress or any other custom CMS where this is easily doable
Strapi is not providing any blur events for now . We have Posted Comments on the strapi forum untill then only way to fix this is by using life cycle events provided by strapi. Refer this link https://docs.strapi.io/developer-docs/latest/development/backend-customization/models.html#lifecycle-hooks
Get Date and Time in Separate Fields .
Merge those values when clicking on save button .
https://forum.strapi.io/t/change-value-of-input-field-on-another-fields-blur-event-in-strapi/19829

Attempting to create a calender with a clock picker built into each day as an ng-click

I understand that this sounds a bit far fetched but i want to build a monthly calendar that when the day is clicked it is routed to another page that then prompts the user to put in a start and end time which the program then calculates the total amounts of hours and assigns it to the original calendar. I have found a few j query plugins however when combined or any of their code is manipulated they both seem to break. If you have any suggestions anything is welcomed. I can upload what i have for code so far but its not really flushed out or good at all.

FullCalendar gotoDate loses drop event with multiple calendars

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.

What is the best solution to check if dataset has been changed (added / edited ,deleted records)?

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.

Planning tool JQuery / MVC 4

The webapplication I would like to build gives the user the possibility to select a period on a calendar. On the selected days they can write the start and end hour. The total amount of hours gets calculated. On the image below you can see what I would like to accomplish. What is a good way to get started programming this? Is there a good tutorial to get me started?
Is there a JQuery widget that gives a good start?
On the left you got some Employees and for each of them the user can select the period and fill in the hours they have to work.
I hope u get the idea that i have in mind. Please feel free to ask me any specifications.
I'm using MVC 4 - razor pages for the webapp
Thanks in advance
I've made something very similar in a MVC2 app with jQuery to check schedules for formative actions.
I first place a temporary span for the action and load it into the calendar provided by jQuery's datepicker, later I overwrite it's onSelect event to affect and save my data.
So when I click on a day of the calendar (only days on the previously selected time span are clickable) I allow user to introduce data for the schedule on that day.
Data saving to server is managed through AJAX calls that saves during using interaction.

Categories