fullcalendar Month View Issues - javascript

I'm trying to use FullCalendar in my new project but I can't find any information on how to do what I want. Has anyone done something similar or have any idea on how I can achieve this? My aim is to have a Month View of the calendar like this:
However, what ever I've tried I couldn't make the 2 slots visible in the Month View.

What is displayed within those 2 slots? You will probably have to make your own custom view for this.
https://fullcalendar.io/docs/custom-views

Related

How to enable months view in date picker material ui

I'm currently making a date-picker using Material UI in REACT. I'm struggling to find a solution where I can click on the month label/text that will make it show months only.
I can make it show the desired view of months only if i add views={["month"]} prop to the component.
check this codesandbox https://codesandbox.io/s/8gpxl
If you add views={["month"]} as prop in the component. You will see that it has my desired effect/view. However i'm struggling to find a way i can switch to this view on click of months text.
So in the codesandbox where the datepicker is displayed. I would like to click on 'August 2014' which will then make the views={["month"]}
I've tried searching the documentation thoroughly and still can't find a solution. I can't use onChange as that's specifically handling the date, i've tried/thought of doing onClick but that will make it apply to whole component rather than the month label.
I can't seem to find a solution to do it however i feel like it's possible because on the second datePicker in the codesandbox where it doesn't have prop disableToolbar. If you click on the year 2014, it then toggles the whole datePicker view to the years. I need it do the same for months when i click on August 2014. So it does seem possible, just need a little help figuring out how.

ReactJS Ant Design - Use Range Picker as Multi Month View with Single date selection

I have a requirement of implementing Multiple Month View which shows two months calendar side by side exactly like RangePicker but to be able to choose only single date, not a range.
I have made a Sandbox
If anyone has worked on such solution, please help.
Thanks.
I worked on something similar recently. I made an override to the Ant CMS for the range selection blue background. I just kept the styling for the dates that are clicked, and I just kept the two selected dates instead of the entire range.
It's a hack, but it worked fine and I've yet to run into any issues with it.
Set allowEmpty={[false, true]} disabled={[false, true]}
Demo

Bootstrap Calendar order of events in week view

I have a high interest in creating my own event calendar/scheduler for my site and found Bootstrap Calendar, it has real potential. I looked at dhtmlxScheduler but its hard to customize the look, it has a lot of nice features though. I have a Fullcalendar now and I like the new Scheduler but I still want a more custom look and some custom functionally.
My JS/Jquery is limited so it makes it difficult to get a real picture of BS-Cal layout and unfortunately there seems to be little documentation other than comments in the code.
So my issue with BS-Cal is the event ordering/stacking in the week view.
The Question - Can the events be reordered in a per day list like the 2nd photo below.
So far - I see the offset class for the columns and the events but the events seem to be wrapped in a "row" div which forces a single "list" for the whole week rather than per day placement order left to right on the table.
Here is what I believe is happening:
This is what I'm hoping to accomplish:

Create a timeline in rails / html / js

I'm working on a Rails app that has events in it, and I'd like to be able to show a timeline of events. There's an Event model, and events have a start_date and end_date.
I can show the events by date etc without any problem. However, what I'd like to be able to do is create a horizontal "timeline", similar to the network graph on Github. Basically I'd like to be able to plot a graph with lines from the start date to the end date, and for any given set of events I'd like the timeline on the top to start with the date of the earliest event and then span horizontally in even increments of time to the end date of the last event.
How would you accomplish something like that in HTML / JS? I believe I understand the server side of things enough to pull any needed data from the app, what I don't understand is how to make a view out of it. To be honest I'm not even sure where to start.
I really appreciate any feedback or suggestions on how to get started in tackling this. I realize this question is more open-ended than ideal, I'll be happy to try and make it more specific in response to comments.
try event_calendar, you may see some screen shots here and this is the railscast
HTH :)

javascript calendar

I was wondering if there was a simple way to make a topdown list calendar for a website. I don't want to use the google calendar. I would also want the calendar to show like the next 5 events and hide the rest until the 5 shown have already happened. If there is a way to do this with jquery I wouldn't mind doing that either.
Here's a good starting point:
http://www.javascriptkit.com/script/cutindex1a.shtml
Just about every layout for a calender structure, and then event-show limiting etc could be implemented by you at the end. At the least it'll give you a base with which to work from.
Hope that helps.

Categories

Resources