Big Calendar - How to display a half day in month view - reactjs

I am using Big Calendar (https://github.com/jquense/react-big-calendar) in my react application, and I have problem to show only half of day for event in month view in Big Calendar component.
For example:
Event starts on 06.04.2021 at 12:00, and ends on 09.04.2021 at 12:00
Default behaviour:
Output should looks like this:
PS: In this scenario, it is easy just move it by CSS combination of position relative and right/left property. Complications occurs when event cover more weeks like this:
Any help?
Thanks.

At the time of writing this is not possible in any version of fullCalendar (or derivatives such as react big calendar). The "month" view has no concept of any time period shorter than a day.

Related

making a side panel in default view to show the months calendar. react-big-calendar

I am making a react calendar. When I am in my default view, which is today's day view, I want the months calendar (in typical calendar form) to show on the right hand side. Like an extra side panel.
I have been looking for a few hours and I haven't been able to find anyone/examples of something similar.
I am going to post a picture of my desired outcome. If anyone has come across something like thing, please let me know.
You would use a basic calendar control (Big Calendar would be overkill), in your right hand panel, and need some logic to sync displays in some way (probably by controlling your date prop at a higher level, and sharing between the two)

Jfxtras-Agenda, set Calender to fixed Week

I´m working with the Agenda-Tool and want to set it to one fixed Week, because I just want to use it as a Timetable for a School and they want to work with the same schedule each Week. I know that it is using the util.Calendar, but i can't find a Way to set it fixed. Thanks in Advance!
Agenda has a displayedCalendar property which is used to specify what is to be shown. In week skin it will display the week where the calendar is part of, in day skin it will show the single day (and if there will be a month view...

Apple Magic Mouse causes crazy paging in date field

When I used my Apple Magic Mouse to select a date on a date field (either Ext JS 3.x or 4.x), it often starts scrolling months very rapidly and sort-of out of control. I think it might be due to the multi-touch sensitivity. It can happen even if I'm not trying to change the month but just select a date in current month. Is there a way to keep the mouse under control using javascript, or do I just need to learn how to use the mouse better?

WPF schedule control

I'm looking for a very simple schedule control for WPF.
What I need is something like daypilot or the Outlook scheduler but with minimal functionality.
I simply want to show a day separated in 24 interval (one for each hour). Inside these 24 hours, the user has to define events/task, non-overlapping each other. That's for theory.
Practically, I want to write a control where the user can define inside a day and for each day a week, how much a kWh of electricity costs.
I found a lot of samples, but most of them are very complex, or simply doesn't work!
Here is my original CodeProject article
http://www.codeproject.com/KB/WPF/WPFOutlookCalendar.aspx
http://www.codeproject.com/KB/WPF/WPFOutlookCalendar2.aspx
And here is my remake
http://rudigroblerwp.wordpress.com/2011/09/27/timeslotpanel/
http://rudigroblerwp.wordpress.com/2011/09/27/who%E2%80%99s-the-boss/
codeplex has open source schedule control, see http://wpfschedule.codeplex.com/ But it has only daily view.

What is the most intuitive, usable way of entering a time of day or a duration?

I'm building a line-of-business application in Silverlight and need to get the user to edit two .NET TimeSpan values. One is a time of day (relative to midnight) and the other is a duration. Currently I'm using two TextBoxes, formatted as hh:mm. This is pretty straightforward, but it could definitely be improved. I've observed people using the application and while some have no problem quickly entering times, other people struggle.
Given that I'm working in Silverlight2, what would you see as the perfect custom control that easily let you visualize and edit these two TimeSpans?
To make things harder, the UI should allow any time of the day to be selected with accuracy down to the minute, but emphasize times within the normal working day (eg: 8:00am - 5:00pm). Some users tend to enter 2:00 (am) when they really mean 2:00pm.
In my app, I'm tending towards aligning the times and durations to 5 minute intervals. As a bit of background, this app is similar to a room booking app where people specify when and how long they want a room for.
In one of my web applications I used a slider with 2 handles.
Example:
|.........Y-----------------Y...|
5AM 8PM
Of course I didn't need as high precision as you do, but I believe that with slightly longer slider 5min intervals would be possible.
To emphasize normal workday, you could colour background of the slider in different colour for normal workday. Or make handlers "snap" to start and end of normal workday.
It probably depends on how accurate you need your data and how varying it can be. If it doesn't need to be perfectly accurate and it doesn't vary a lot, you could do something like
Task was performed at [select start time...] o'clock for [select duration...]
where [select start time...] is a pulldown with every hour and [select duration...] is a pulldown with common scenarios for what you're tracking like "30 mins", "1 hour", "2 hours"
If it needs to be flexible maybe just going with the sentence structure and replacing the pulldowns with textboxes would make it clear for all first time users.
Get the latest Sliverlight Toolkit and use one of the new Time oriented controls
Look at Outlook perhaps, it uses dropdowns that defaults to sane half hours (to me anyway ;) and the selections can then be edited by hand afterwards if higher precision is wanted. The duration also follows when the start time is changed, and defaults to an hour or something.
I used text boxes in an old web application before just like you, with the added option of double-clicking them to bring up a quick selection widget like the above Outlook Sample. Perhaps a button or some other Silverlight magic can enhance that.
A vertical time-line like a calendar day in Outlook where you can drag the top and bottom of a meeting "box" is to me the most instuitive or atleast quickest way to place and adjust a booking. Perhaps if it's prefilled with one that spans an hour or so, easily draggable to change the start time - with the top and bottom resizeable to change the duration.
Expanding on what Anthony said, Silverlight Toolkit March 2009 release include TimePicker & TimeUpDown controls.
You can see a live demo of TimeUpDown and TimePicker with 2 popups at:
http://silverlight.codeplex.com/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%201#TimeUpDown
I Actually owned the feature set and API for this control, so I'm extremely well familiar nowadays with what's the best form to input time.
There's a whole list of best practices we can talk about for time input. All of which are currently easily found in the controls.
On some concepts we've had to innovate (like the "Time Intellisense" feature) but mostly we were using true time tested concepts. (no pun intended)
However, as part of the non-goals for these controls for v1 we decided to not support time ranges. If you feel that time ranges is something we should natively support, feel free to suggest this on codeplex:
http://silverlight.codeplex.com/WorkItem/Create.aspx
We actively prioritize items based on amount of votes and user scenarios called on in issues.
For now, I'd suggest you just use 2 TimePickers.
Advanced visualizations (like a multi select ruler or a multi slider) are one way of doing time range input, but you've got to have a solid globalized text input system for a fallback option.
This is a great time to ask what task your users are trying to accomplish. You can craft your system's performance based on this. In Outlook, for example, people usually enter the time because they are trying to schedule a meeting -- so you can easily disambiguate "2" or "2:00" to mean 2pm, because very few users are trying to schedule meetings at 2 am. This sounds similar to your application.
If you look at your users, they will likely also be scheduling for typical times -- these should be easy to specify in your interface. E.g., if most meetings are 50 minutes long, that should be very salient, perhaps a button or other one-click option.
I wouldn't recommend inventing a new input widget. The more standard your input tool, the less your users have to think when using your product. Concentrate on the smarts inside your logic, figuring out (and showing the user) what you think they're asking for.

Resources