MDB Calendar

web
mobile

Topic: MDB Calendar

salman1410 premium asked 1 months ago

I am trying to use the MDB calendar by importing it from import MDBFullCalendar from 'mdb-react-calendar'; . But this is not working. Please guide how to use pro plugins in the react project.


Piotr Glejzer staff commented 1 months ago

did you install all the packages from the package.json? I think it should work normally when you will installed everything with yarn or npm/npx install.


salman1410 premium answered 1 months ago

Yes, I have done with the installation and it is working now in my project. I was trying to make the calendar read-only but could not find any way. is there any way to disable click events of days of the calendar? Plus please provide the solution to customize the header of the calendar.


Piotr Glejzer staff commented 1 months ago

It's not possible to make a disable click events of days at the moment. All customization in the calendar is available in the API section.
https://mdbootstrap.com/plugins/react/full-calendar/. If you have some suggestions about what we can add to this plugin let us know and we will add tasks about that and try to implement this as soon as possible.


salman1410 premium answered 1 months ago

@Piotr Glejzer I need to use MDB Calendar as read-only. Please add props (boolean value) through which we can disable click events of days and if required can enable the click event on the basis of props.


Piotr Glejzer staff commented 1 months ago

Thanks. I added to our list to do. We try to implement this. If you have more suggestions, let us know. Have a nice day.


salman1410 premium commented 1 months ago

It would be great if we can get this by next week, actually, our project is dependant on this feature. can we get this functionality asap?


Piotr Glejzer staff commented 1 months ago

We have a release in the next Monday, we will try to add this feature to this plugin. Have a nice day.


salman1410 premium commented 4 weeks ago

@Piotr Glejzer any update on the functionality we asked for?


Piotr Glejzer staff answered 4 weeks ago

Add prop disableEvents to MDBCalendar component. Like that :

<FullCalendar disableEvents tasks={this.state.tasks} />

it should be working. Have a nice day ;)


salman1410 premium commented 3 weeks ago

Thank you for your support. It is working now. I have a use case to click on any tasks added in the calendar and route it to some specific route i.e making tasks Links. Is there any way to achieve this functionality?


Piotr Glejzer staff commented 3 weeks ago

this a good advice too. I will add this to our task to do but I can't give you an ETA for this now. Sorry about that. We will implement it in future releases. Have a nice day.


salman1410 premium commented 3 weeks ago

Thank you for the response. Actually we need to deploy our system to our client by the end of this week and this functionality is required in the system. We will be grateful to have this on Friday. We won't be able to buy more time any later than Monday. Kindly help to get this functionality ASAP.


salman1410 premium answered 3 weeks ago

@Piotr Glejzerwhile working on the calendar I come up with some use cases which need to be considered. Following are the details of these; 1. currently we have six possible colors for displaying the tasks. I did not find any way to customize those colors.2. While adding tasks on a single day, the size of day div increases but some tasks go outside of that day div. It should be wrapped in div which it belongs to. Below is the link to the screenshot of this scenario. In this screenshot we have all the tasks named Testing should lie inside the div of day 15. As I requested earlier, can we get these features on earliest?

Link;https://drive.google.com/file/d/1Y-13Cs0p4D2HVKjbFmFGxdRuds6QWobl/view


Piotr Glejzer staff commented 3 weeks ago

I added the task to that. I will see what we can do for that in this sprint but I can't make any promises. Have a nice day.


salman1410 premium commented 3 weeks ago

Thank you very much for your support. I will wait for your response regarding updates.


Piotr Glejzer staff commented 3 weeks ago

your welcome :)


salman1410 premium commented 2 weeks ago

@Piotr Glejzer Any updates on above functionalities?


Piotr Glejzer staff commented 2 weeks ago

We didn't add these functionalities like I told that I can't promise anything. We will try to add in this release. Have a nice day.


salman1410 premium commented a week ago

@Piotr GlejzerAny luck with our updates in new release?


Piotr Glejzer staff commented a week ago

Yes, I added more colors and fixed this problem with displaying tasks in the cell.


Piotr Glejzer staff answered a week ago

For example. I changed prop colors to object like that:

import React, { Component } from "react";import FullCalendar from "mdb-react-calendar";

    class App extends Component {
      state = {
        tasks: [
          {
            id: "task1",
            title: "Today",
            startDate: new Date().setHours(0, 0, 0),
            endDate: new Date().setHours(23, 59, 59),
            color: "danger",
            dark: true
          },
          {
            id: "task2",
            title: "Today",
            startDate: new Date(),
            endDate: new Date().setDate(16),
            color: "info"
          },
          {
            id: "task3",
            title: "Task name",
            startDate: new Date().setDate(2),
            endDate: new Date().setDate(15),
            color: "warning",
            dark: true
          }
        ]
      };

      render() {
        const arrOfObjects = [
          { color: "elegant-color", title: "Test", dark: true },
          { color: "danger-color", title: "Test1", dark: false },
          { color: "warning-color", title: "Meeting", dark: false },
          { color: "success-color", title: "Home", dark: false },
          { color: "info-color", title: "Lunch", dark: false },
          { color: "default-color", title: "Something", dark: false },
          { color: "primary-color", title: "Pool", dark: false },
          { color: "secondary-color", title: "Footbal", dark: true }
        ];

        return <FullCalendar colors={arrOfObjects} tasks={this.state.tasks} />;
      }
    }

    export default App;

and you can use colors from our site but just with color name. If you change flag dark to true it will be color with dark mode. I also added a possibility to change a title of the color category with the object key title. It will be available in the next release.

See screenshot below:

http://i.imgur.com/VKYnmgt.png
http://i.imgur.com/53OCUvV.png


salman1410 premium commented a week ago

Thank you for your support and for adding these functionalities. How are we going on making the tasks as Link i.e redirect to some route when clicking on a Task? We also need this functionality in this release. And When are we expecting the next release?


Piotr Glejzer staff commented 7 days ago

I think is not possible to do that now. I will try to think more about that. The next release on Monday.


salman1410 premium commented 6 days ago

It would be kind if you add this functionality too in this release. This is a mission-critical situation here.


Piotr Glejzer staff commented 5 days ago

I will try to add this in this release. Have a nice day.


salman1410 premium commented a day ago

I have seen the new release, is making Tasks Link functionality added in this build?


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.24.0
  • Device: Lenovo Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No