Fullcalendar Time Slot Click

Posted By admin On 14/04/22

Description

Add Booking Appointments system to your WordPress site and manage Appointments with ease. Extremely flexible time management. Multiple location, services and workers. Email notifications.

Can be used for : Lawyers, Salons, Mechanic, Cleaning services, Doctors, Spas, Personal trainers , Private Lessons, Escape rooms etc,

Live Demo

  • Questions: I am developing a webapp and am using jQuery fullcalendar plugin. I need to somehow disable certain time-slots. The current method I am using is to add events for the time-slots I want to disable and disallow event overlapping.
  • In the Week and Day displays, the multi-day all-day event is showing not in the 'all-day' box, but filling up all the other time slots. And, in the List display, on the first day of the multi-day all-day event, the time is listed as '12:00-12:00', then 'all-day' listed for the middle days, and then on the last day, the time is shown as 12:00-23:59.
  • Use the dayClick callback of fullcalendar to get the moment of a single click on an unoccupied slot. Remember the moment of the slot clicked. If the mouse moves, forget the moment. Bind a dblClick event handler to the calendar div. When it fires, check if there is a remembered moment and do something with it.
  • Docs Date & Time Display The frequency for displaying time slots. In line with the discussion about the Event object, it is important to stress calendar.addEvent (event , source ) event is a plain object that will be parsed into an Event Object. Source represents the Event Source you want to associate this event with.

Responsive Appointment form
Responsive Appointment form – two column layout
Full calendar NEW
Standard Appointment form

Doc

Features

  • Multiple Locations
  • Multiple Services
  • Multiple Workers
    • Create dedicated calendar for one location / service / worker
  • Create time slots by connecting location – service – worker and date/time
    • Multiple time slots
    • Fine granular option for creating even most complex time table
    • Bulk connections builder
  • Extremely flexible time table
  • Email notifications :
    • Send email notification to customer on creation and update of appointment
    • Send email notification to predefined list of admin users
    • Send email notification to employee
    • Custom content and subject
    • Custom admin email
    • Confirm booking via link provided inside email
    • Cancel booking via link provided inside email
    • HTML content via WYSIWYG editor
    • Custom emails for different status of appointments : pending, reservation, canceled, confirmed
    • Include any information from booking inside email content even from custom fields
  • Single Column Responsive Bootstrap Layout for Appointment form
  • Two Column Responsive Bootstrap layout
  • Custom form fields :
    • Create your own custom form fields in a few clicks
    • textarea
    • select
    • input
    • Make fields required
    • Drag and drop order
    • Google reCAPTCHA v2
    • NEW use current logged in user data sa default value for custom field.
  • Internationalization – support for translations (you can create your own translation >> tutorial <<)
    • German translation (thanks to Matthias)
    • Romanian translation (thanks to Vlad)
    • Polish translation (thanks to Maciej Bauza)
    • Finnish translation thanks to Maija
    • Portuguese translation thanks to Antonio
    • Portuguese Brazil translation thanks to seniweb
  • Labels
    • Hide price
    • Add custom currency
    • Set currency before/after price
    • Custom style
  • Localization of datepicker for 77 different languages (day of week, months)
  • Reports
    • Time table overview
    • Export to CSV (for Calc, Excel…)

Need even more like Google Calendar, iCalendar, WooCommerce or Twilio SMS support?

Display your events on a grid of time slots. Published 5.4.0. a month ago. An official FullCalendar component for Vue.

There is extension plugin that you can buy and add to your Easy Appointments plugin :

  • Google Calendar with 2 way sync
  • iCalendar
  • Twilio SMS notifications
  • WooCommerce integration
  • PayPal integration

For more info follow the link for Extension plugin

HomePage

Time

Feature requests

Full Calendar Time Slot Click

This is list of all features that will be added at some point of time :

  • Multi select slots (select more than one slot at time)
  • Whole day selection (for example if you are renting something on daily basis)
  • County field in Location along with improved dropdown selection

Installation

Install process is quite simple :

– After getting plugin ZIP file log onto WP admin page.
– Open Plugins >> Add new.
– Click on “Upload plugin” beside top heading.
– Drag and drop plugin zip file.

There is a really good non-official step-by-step video tutorial on https://www.youtube.com/watch?v=H7Hj4jfMDik

Shorcode

In order to have Appointments form in your Page or Post insert following shortcode

For NEW bootstrap version :

Options :

width : default value 400px
scroll_off : default value off
layout_cols : default value 1

example : [ea_bootstrap width=”800px” scroll_off=”true” layout_cols=”2″]

FAQ

How to set custom cron task for clearing reserved slots

Create cron task on your host that have this link : wget -q -O - <STIE_URL>/?_ea-action=clear_reservations > /dev/null 2>&1 . This will delete all reservations older than 6min.

How to translate labels

Form labels can change in settings page but if you want to translate rest of it you need to create translation file. Here is video tutorial for that : Screencast

How to hide service / location / worker in front end part of form?

To do this you must create one location / worker or service and set Name that starts with underscore. For example : _dummy, _location

In admin panel all pages from plugin are blank?

You have probably turned on option in PHP called asp_tags, you need to turn it off in order to plugin work properly.

I can’t edit or delete any settings?

Your hosting is probably blocking HTTP PUT and DELETE method. You must mark option called ‘Compatibility mode’ in settings.

How to set multiple slots for one combination of location, service, worker?

To add more slots per (location, service, worker) combination just clone the existing one. For two slots you need to
have that connection twice.

How to insert Easy Appointments widget on Page/Post?

Place following shortcode into your Page/Post content:

OR

Fullcalendar Time Slot Clicks

For bootstrap there are options :
width : default value 400px
scroll_off : default value off
layout_cols : default value 1

Example :
[ea_bootstrap width=”800px” scroll_off=”true” layout_cols=”2″]

How to set form in two columns?

You can set bootstrap form in two columns with layout_cols option. Example :

How to create calendar only for one worker / service / location

If you want to have separate calendars base on worker for example. You can do that by setting default worker inside short code.
[ea_bootstrap worker=”1″]
Value is worker #id number. Examples :

Note: you can have only one calendar on one page.

Reviews

Ihighly recommend this plugin.Easy to use and wery polite suport. Mateusz