What is Reddit's opinion of FullCalendar?

From 3.5 billion Reddit comments

Definitely don't re-invent the wheel. Use a library.

A quick search came up with this, but I've never used it...

https://fullcalendar.io/

​

Note: I'd consider library size when looking around. If you need something simple, you can probably get away with a smaller, more simple library.

My code example is for a single repeating task occurrence, in place of user_id you could have salon_id and build up a series of occurrences based on multiple rules, the schema I supplised is for a single RRule instance, you will need multiple RRule instances to build up a collection of available (and inavailable) dates given a supplied date range.

Ther is a method in that model that spits out a generated RRule, you can play with those strings using this tool here:

https://jakubroztocil.github.io/rrule/

Full calendar supports RRule also:

https://fullcalendar.io/docs/rrule-plugin

I unfortunately don't have a magic bullet for your specific use case and there is going to be a bit of getting your hands dirty and reading through the docs of the respective packages to forge your own path here.

Ultimately, whatever solution you come up with you will have learned something so don't hesitate to give it a go using whatever method you are the most comfortable with.

Yeah I wasn't clear enough, sorry. So, I was thinking about fullcalendar.io. It's an amazing api to integrate a fully functional calendar. If you could implement something like this, it would be amazing!

You won't find such a specific guide.

But you will find guides how to make web applications using Django.

https://docs.djangoproject.com/en/3.2/intro/install/

You will also find guides how to make dynamic web interfaces using Javascript.

https://fullcalendar.io/docs/external-dragging-demo

Combining the knowledge should help you make a web-based application that does what you need.

EDIT: just be aware this is a sizeable project, I would not recommend this as your first python project.

I've recently implemented fullcalendar for my job and I found that their own documentation was fairly comprehensive. If you're using the javascript version of fullcalendar and you're finding their own documentation outdated or tough to follow it may be you're looking at the v4 documentation - in v4 they moved to typescript and changed how a lot of the backend works. You can still find the old javascript documentation (i.e. v3 and earlier) by using the drop-down in the top-right corner of the documentation site. Alternatively you can go straight to https://fullcalendar.io/docs/v3

When you're loading in your events from the database you will want to make sure you populate the 'title' property for the event object as this determines the event title shown, see https://fullcalendar.io/docs/v3/event-object

There's an example in the documentation here for dynamically adding an event to the calendar: https://fullcalendar.io/docs/v3/renderEvent-demo

and specifically the related codepen link in the top right corner of that page.

This should give you a good starting point as it will allow you to add a generic event with a hardcoded title to the calendar so you can expand this code to allow input for a custom title, and if you look under the date.isValid() check there's an alert labelled 'Great. Now, update your database...' which is where you will want to put your callback to the database to actually save the event.

I'm not familiar with MySQL and php myself so I can't help you with that part in particular but happy to try and assist with anything fullcalendar specific if you have any further questions.

So after looking, it looks like this could work out pretty well for what you're wanting. There is an agenda view built into the package, https://fullcalendar.io/docs/agenda-view, and some properties to be able to change the duration of slots on the view. It allows click on the event to be able to change any data you want for the calendar event.

IIRC that version of the google calendar was deprecated and a replacement that works with fullcalendar hasn't been built out (when I last looked a few months ago.)

JK - I was wrong - https://fullcalendar.io/docs/google_calendar/ has the details.

does it work outside of the rails gemified version of fulcal? I recall those being pretty out of date compared ot the current full cal JS release.

Great write up! Here's an image of the one I've been working on. It's still a work in progress.

The calendar access data from a few Google calendars so that any events added to the school calendar or my personal calendar show up on the dashboard. I use this calendar instead of Google's because I wanted all of the fonts and colors to match. It's also a dynamic calendar and you can click the buttons to move through the days/months but you can also add events too. I want to set it up on a touchscreen so it can replace the paper calendar that's hanging up now.

For displaying the weather, I started with this example and modified it to match.

The traffic image is embedded in a frame and the estimated commute time is also read from Google's API.

I enjoy this subject and hopefully these links are useful to others. HTML and CSS are not my day job so I've done the best I can trying to blend all the parts together. I still want to add a news feed and scale the whole page so that it fits the monitor perfectly while still being readable.

This gets fairly complicated in C/C++, maybe there are nice calendar libraries for C# (I've never needed one so never looked) but,

A webpage with something like https://fullcalendar.io/docs/intro on would be the easiest way I can think of rendering a calendar and plotting things on it. You can colour code things however you like by messing with the CSS, and add whatever other UI elements you want with the standard HTML, CSS, JS etc.

If you want it to look like a desktop app rather than a web app, look into Electron, or simply start your browser in kiosk mode.

You can use https://fullcalendar.io/(it also support adding tasks) if you know some javascript, i used it all the times when i want to have a Calendar view. You just pass in date events from the view to the calendar

It's fine to use MudBlazor components only until you can't. You can always mix MudBlazor with other html/css/javascript libraries. As an example, if the chart control that MudBlazor provides do not fit your need, you can always utilize chart.js and use standard html/css/javascript.

What you want to avoid is limiting yourself to one. There are just too many good open-source libraries out there you can use. Example: https://fullcalendar.io/demos

Goodluck hacking at the OOTB calendar.

TBH better off doing a rest call for event and render with something like fullcalendar.io here is the JS to hide weekends for that http://jsfiddle.net/w11xw5gt/1/

There has to be an error somewhere, the meal plan is "just" a FullCalendar week view calendar.

If it's ok for you and you can get out the database file (data/grocy.db) of the container (personally can't help with containers), feel free to send me that and I will have a look.

In order to have some booking functionality you'll need something for that (or you can build it yourself from the ground up). You can use something like https://fullcalendar.io/ and implement booking with it. FullCalendar is flexible enough to allow you to add Stripe to it in any way you want.

Maybe you could use FullCalendar, in particular this example:

https://fullcalendar.io/docs/date-clicking-selecting-resource-demo

I would advise using Vue. In my experience it's the easiest framework to learn if you have zero experience with JS frameworks.

Not sure if it fits your requirements (a mockup would have been helpful) but I've worked with FullCalendar, it's very well documented and the API is clear and easy to use.

Give FullCalendar a shot. It integrates with bootstrap quite nicely and the docs are decent. I’ve used it in a few projects.

You’ll probably need to make some adjustments to your controllers, as FullCalendar expects a certain data format, but that shouldn’t be a showstopper.

Glancing at the docs, it doesn't look like you can use this option if your events are provided through a GraphQL endpoint. But it looks like you can also provide a function for fetching the events. So just use that:

const calendar = new Calendar(calendarEl, {
  ...
  events: async function(info, successCallback, failureCallback) {
    const { startStr, endStr } = info
    const query = `...`
    const variables = {...}
    try {
      const res = await fetch('YOUR_ENDPOINT_URL', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, variables }),
      })
      const { data, errors } = await res.json()
      // Parse data for your events and call successCallback with them
    } catch (e) {
      failureCallback(e)
    }
  },
}

Untested, but what i got from the docs was;

const cal = useRef(); useEffect(() => { cal.current.getApi().changeView(isMonthlyViewEnabled ? "dayGridMonth" : "timeGridWeek", dates); }, [isMonthlyViewEnabled]);

Sources:
getApi
changeView

I’ve never used FullCalendar but any data you pass as props or is emitted by an event you can store obviously; Whether that’s on firebase or elsewhere. On the FullCalendar docs it goes over vue intergration. If you’re trying to persist events on the calendar, they’ll be emitted as an event as described in the docs. Then you save it in firebase. When the user reloads, retrieve that data and pass it to the calendar as props. https://fullcalendar.io/docs/vue

Requires a basic understanding of JavaScript, but fullcalendar.io is the way to go. I have it working on a couple sites with Elementor. as a bonus, it integrates fully with Google calendar.

Hey there,

Unfortunately I can't share all of the code because it's a client project, but happy to share the related component stuff.

datesChange() is my function, which I pass into FullCalendar as a property. It's triggered whenever the user changes the date (such as clicking on the calendar arrows and navigating to a different date).

​

Official description is: "Triggered when a new set of dates has been rendered." from https://fullcalendar.io/docs/datesRender.

​

But again, it's working absolutely fine until I change the state on the Vuex side. I'm mapping my props on the component like this:

​

computed: {
...mapGetters(["events", "resources", "isLoadingCalendar"])
},

​

Which should map to this in my store:

​

export const getters = {
events(state) {
return state.events;
},
resources(state) {
return state.resources;
},
isLoadingCalendar(state) {
return state.isLoadingCalendar;
}
};

​

My state is:

​

const getDefaultState = () => {
return {
events: [],
resources: [],
isLoadingCalendar: false
}
};
export const state = getDefaultState();

Does anything there look strange?

Depends an awful lot on what you mean by an appointment system - It's a very vague requirement, and should be fleshed out more before you even think about coding it. Break down what you actually want to

You could look at tutorials for something like FullCalendar.io as the frontend, with PHP api to back it up, as it allows for creating new events etc. But this in its self would be very basic, allowing all and sundry to click and create events.

Complexity is introduced when you look at things like:

• Venues - can appointments happen in more than one place?
  • Do individual venues have multiple rooms?
  • Are individual rooms/venues only available on specific days?
• (Human) Resources - Is there more than one person that can have appointments booked with them?
• Authentication - who is allowed to book an appointment? Is there any limit on where and with who those appointments be booked with.
• Time - Can appointments have variable lengths of time, if so, what determines the length? Rarely is it the person booking the appointment!

That looks a lot like full-calendar. You could try to recreate this on you own, but someone found it so complex they built a company around it. Suppose it depends how much of full-cal's functionality you need.

Have you considered using a different library, say fullcalander since it looks like that might be more appropriate to what you're trying to achieve.

A demo of FullCalendar timeline view, https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/demos/simple.html

Well some of us are more EASILY TRIGGERED, SIR.

​

...jk, but seriously: how fkin hard would this be to give what was the bread and butter novice user adoption use case: show a calendar on a page.

• not every business function/office like slideshow where the bar is set to return 3 items at a time
• stop pushing the ux of a page/what should be colocated data to different apps (exchange/teams)
• someone at ms just make a modern/updated webpart that saves people from doing a rest call and pushing data render into https://fullcalendar.io/ or wrestling dog shit legacy/classic xslt views with problematic AF overlays

​

...afk finding a coffee and a user voice to upvote

I tried using the built-in calendars, and found them clunky.

Have you tried Fullcalendar? Feed it a little REST, and it does everything. Super easy to work with and looks great.

In modern practices, you want to put all your javascript just before your closing </body> tag. Looking at the docs: https://fullcalendar.io/docs/usage/ it tells you to put everything in the head... That is not needed. Put your css in the head and your js before you close your body tag.

So in your template(s), make sure the app.js is called first, then any scripts you want to include should go after.

Setting up your template similar to /u/NotJebediahKerman's suggestion makes it easy if you only need to include your fullcalendar.io script in one specific template.

So the $ is the symbol that calls the jQuery library, so that error means that there's something going on with how you're loading in your assets.

I'm a front end dev and unfortunately JavaScript will always be really picky since it's asynchronous.

Basically, you need to load in the jquery library, the moment.js library, then the full calendar library, and then your own code. They have to be in that order because full calendar is dependent on the jquery and moment.js library.

JS dependencies are a pain in the ass but I've you set them up once you shouldn't have to mess with them again.

Look at how the scripts are ordered in the docs here:

https://fullcalendar.io/docs/usage/

Thanks so much for replying!

I see what you mean about the gem being outdated, however the package (.zip) i downloaded off the main website, which comes with all the necessary javascript, jquery etc files to run several demos, cant connect to google calendar either. Would the website itself be that out of date as well?

If its not too much of a hassle could you try downloading the package: https://fullcalendar.io/download/

And registering your own api key and public calendar just to confirm? Its literally just extract and in demos theres a gcal demo which has 2 variables to fill out to establish the connection. Its so simple i just can see how it doesnt work

Its driving me crazy :(

I have written a django app that integrates with fullcalendar.io. It is far from production ready. It is in a private repo now. But if others have interest in working on it, it might put it in a github public repo.