MDB Calendar Plugin


Topic: MDB Calendar Plugin

cwilliams pro premium priority asked 2 years ago

Expected behavior Show MDB Calendar Actual behavior Does not show MDB Calendar Resources (screenshots, code snippets etc.)

New Calendar

jQuery(document).ready(function(){ $('#calendar').calendar('next'); });


Grzegorz Bujański staff answered 2 years ago

Please send a snippet in which calendar is not working. I've checked and it looks like calendar is working fine https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4387082#js-tab-view


cwilliams pro premium priority commented 2 years ago

I uploaded the snippet, but it does not work for me. All the elements should be linked properly. What am I doing wrong?

https://www.palashospitality.com/beoprospect/newcalendar.cfm https://www.palashospitality.com/beoprospect/snippet/index.html


Grzegorz Bujański staff answered 2 years ago

Take a look at your console errors on this pages - on one you don't have jQ correctly added, on the other, it looks like you have incorrect links to MDB files.

In addition, I can see that you are trying to use MDB5 calendar, but the files you have added on the site suggest you are using MDB4. Which MDB version do you want to use? f from the MDB4 version the documentation for this plugin can be found here: https://mdbootstrap.com/docs/b4/jquery/plugins/full-calendar/


cwilliams pro premium priority commented 2 years ago

Looks like I got the version 5 calendar to at least show. I am still getting several console errors. Can you help me resolve them?

https://www.palashospitality.com/beoprospect/calendartest2.cfm

I also need to know how to use the jquery version of this calendar in version 5.


Grzegorz Bujański staff commented 2 years ago

You have imported MDB Free, therefore there is an error related to select which is a pro component. Import MDB Pro, the second error is probably also related to this.


cwilliams pro premium priority answered 2 years ago

I am in need of the unminified Javascript code that generates the add event modal for the calendar plugin. I also need the code that will "hook into" the submission of the add event modal for the calendar plugin.


Grzegorz Bujański staff commented 2 years ago

Inside the package, you can find the plugin's source file. Check \src\plugins\calendar directory inside zip or GitLab repository.


cwilliams pro premium priority answered 2 years ago

I need to know the exact location of the code that is executed after you hit the add button on the "Add an event" modal. How can I create my own ad an event modal?


Grzegorz Bujański staff commented 2 years ago

After you click add event button, _toggleNewEventModal function starts. Even modal template is in src/js/utils/template.js. You can edit this template to customize event modal. Take into account that there are two template - for add event modal and edit event modal


cwilliams pro premium priority answered 2 years ago

"_toggleNewEventModal" seems to be run after you hit the "Add Event" button. I need the code block that executes after you hit the "Add" button once the modal is already open. I also need an example of how to add radio buttons to the modal.


Grzegorz Bujański staff answered 2 years ago

It looks like you need help making your own version of the calendar plugin with additional features that are currently unavailable.

In the support forum, we help if the already available features do not work properly. If you need help in creating your own solution, we can offer you help as part of our services: https://mdbootstrap.com/services/


cwilliams pro premium priority commented 2 years ago

Can you please just tell me where to find the code block that executes after you hit the "Add" button once the modal is already open?


cwilliams pro premium priority answered 2 years ago

Can you please just tell me where to find the code block that executes after you hit the "Add" button once the modal is already open?


Grzegorz Bujański staff commented 2 years ago

_updateAddEventModalContent method adds an event listener to submit forms inside a modal that runs the _addEvent method


cwilliams pro premium priority answered 2 years ago

How would I go about getting a hold of the event modal values programmatically after they are submitted when the "Add" button is pressed on the add event modal. I am wanting to save them to a database during the same process that adds them to the calendar.


cwilliams pro premium priority answered 2 years ago

How do you change the dates in the "add event" modal from the 23/01/2023 format to the American style 01/23/2023 format? Also how do you change the calendar event color (#cfe0fc) to something else?


Grzegorz Bujański staff commented 2 years ago

This requires changes in the source code. You need to edit the template for add event modal and add the format option in the datepicker. In the same template you can define your own colors that can be set for events


cwilliams pro premium priority commented 2 years ago

I was able to modify the date format. Can you point me to the right file to change the color?


Grzegorz Bujański staff commented 2 years ago

This is exactly the same template where you had to change the date format.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.20.0
  • Device: Mobile
  • Browser: ALL
  • OS: Windows
  • Provided sample code: No
  • Provided link: No