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);
});
})
Related
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
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'm new to jQuery and I'm currently trying to figure out a way to manipulate datepicker so that it would show all the dates of a single month in just one row.
I'm trying to build a multi-unit hotel reservation-type calendar to be used as admin (not client-facing). I've got so far as to build a calendar-looking thing from scratch using loops and <ul> (this is from my research of popular BnB websites that have calendars with blocking click-and-drag functionalities). So the multi-unit calendar for February would have Days 1-28 as columns, and each unit/room as the rows.
I know jQuery comes with documentation for their API but in all honesty I have crawled through the interwebs and there is just not a single answer for my question.
Is there a simple method that controls how many cells printed per row? Because obviously a regular calendar always has 7 days per row. Or would I have to code this from scratch or is there somehow a more complicated but doable way with Datepicker?
Thank you all in advance!
I'm looking for suggestions/recommendations for a JQuery/Javascript calendar that can display multiple months at once (ie. previous month, current month, next month) like so:
(The attached mockup shows a 4-month view, but I think we'll actually be doing a 3-month view).
I DO NOT need a date picker. This is basically meant to display a user's schedule, with no ability to choose a specific month/year (beyond the side-scrolling). We'll pull events out of our database, hook them into the calendar somehow, and then on a day click/hover (or both), display additional information. Events will not be editable from this view - it is display only.
I've looked into general JQuery calendar plugins (Ion Calendar, CLNDR), but none seem to have the basic multiple-month functionality I need. Multi-lingual support (or the ability to add multi-lingual text) is also important to us. I was really hoping to find a ready-made plugin for this - can't be the first time someone's tried to do it!
In case it's any use/help, we use ColdFusion and MSSQL Server. We've also got JQuery 1.9.1, JQueryUI 1.10.0 and Bootstrap 2.3.2.
Edit: I did look at the JQuery UI datepicker, but it won't work for the functionality I need. I can't see any way to attach data to a specific date, or to be able to style certain days differently than others. I think the primary issue w/ it is that it's a datepicker, not a display calendar.
Like Sean said in the comments, the best option you have is probably FullCalendar. Although multi-month isn't supported out of the box, you might be able to achieve it by adding multiple calendars. Check out Issue #199, which describes a possible solution.
Regarding the multi-lingual problem: although it isn't multi-lingual by itself, FullCalendar does support modifying the days, months, etc. See Text/Time Customization. You could use ColdFusion's MonthAsString and DayOfWeekAsString functions to make it multi-lingual yourself.
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.