MDB Calendar

web
mobile

Topic: MDB Calendar

salman1410 pro premium asked 3 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 3 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 pro premium answered 3 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 3 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 pro premium answered 3 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 3 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 pro premium commented 3 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 3 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 pro premium commented 2 months ago

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


Piotr Glejzer staff answered 2 months ago

Add prop disableEvents to MDBCalendar component. Like that:

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

it should be working. Have a nice day ;)


salman1410 pro premium commented 2 months 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 2 months 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 pro premium commented 2 months 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 pro premium answered 2 months 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 2 months 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 pro premium commented 2 months ago

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


Piotr Glejzer staff commented 2 months ago

your welcome :)


salman1410 pro premium commented 2 months ago

@Piotr Glejzer Any updates on above functionalities?


Piotr Glejzer staff commented 2 months 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 pro premium commented 2 months ago

@Piotr GlejzerAny luck with our updates in new release?


Piotr Glejzer staff commented 2 months ago

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


Piotr Glejzer staff answered 2 months 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 pro premium commented 2 months 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 2 months ago

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


salman1410 pro premium commented 2 months 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 1 months ago

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


salman1410 pro premium answered 1 months ago

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


Piotr Glejzer staff commented 1 months ago

We will not implement react-routing in this plugin at the moment.


salman1410 pro premium commented 1 months ago

is there any workaround to achieve this, I mean triggering a custom function on clicking on the tasks?


Piotr Glejzer staff commented 1 months ago

It's not possible at the moment. We have a close repo for this plugin and we will probably open it to users in the future that you will allow modifying code by yourself. I will try to think again about that anchor or other links in the task component.


salman1410 pro premium commented 1 months ago

@Piotr GlejzerI can understand the challenges you are facing. Is there any solution we can add to achieve this functionality at our end because our clients are having trouble using our system without this desired functionality.


salman1410 pro premium answered 1 months ago

@Piotr Glejzer I am getting an error while using file:mdb-full-calendar-4.16.3.tgz in my project. The below link is the screenshot of the error generated when I run my project. is this an issue of the MDB version installed?

https://drive.google.com/file/d/1tgwPRZka7hgDb6Xm-dBVysC611GDQIgP/view?usp=sharing


Piotr Glejzer staff commented 1 months ago

I will check it. I don't see this error in that plugin.

Edit.

Ok, I see now, I don't know why it is not working because in my development repo everything is working correctly, I have to find out why. If you will have problems please you version 4.16.2.


salman1410 pro premium commented 1 months ago

@Piotr Glejzer We are using Access Token for MDB Dependencies, don't know how to check MDB version and update it?


Piotr Glejzer staff commented 1 months ago

you can write on the #4.16.2 on the back of your token like this

git+https://oauth2:your_token@git.mdbootstrap.com/mdb/react/plugins/calendar-plugin.git#4.16.2


salman1410 pro premium commented 1 months ago

@Piotr Glejzer Thank you so much it worked.


salman1410 pro premium answered 1 months ago

@Piotr Glejzer I found some issues in MDB Calendar responsiveness. Below are the links of screenshots;

1.List View Task overflow issue: https://drive.google.com/file/d/1fr3Y6piSa-obSaQpxHlGV6pCZIIYzjHC/view?usp=sharing 2.Task overflow issue: https://drive.google.com/file/d/1EUwdGclrJ_PLNhb7IjUb82fuJgMbFeOO/view?usp=sharing 3. space between tasks: https://drive.google.com/file/d/1iBW9VuVIhE74NSqI_xGh4ytAd5GoBryJ/view?usp=sharing https://drive.google.com/file/d/1vKf-rLQ4iy9zlMV9NhN7RCKqDeA8-E1Z/view?usp=sharing


Piotr Glejzer staff commented 1 months ago

I fixed number 2 and number 3 but what is a problem with number 1?


salman1410 pro premium commented 4 weeks ago

@Piotr Glejzer In number 1 tasks are overflowing to the right outside the grid.


Piotr Glejzer staff commented 4 weeks ago

We will add a new version in this release so you can use it and if we will have some problems let me know. Thanks.


salman1410 pro premium commented 4 weeks ago

@Piotr GlejzerThank you, brother, for all the support. Are we hoping to have the functionality of making Tasks as Links in this release? Actually we are having a hard time with our clients regarding this functionality.


Piotr Glejzer staff commented 3 weeks ago

No problem! I will look into that problem with link in this sprint, I have a hope that I will find a good solution for that. Have a nice day!


salman1410 pro premium commented 2 weeks ago

@Piotr GlejzerThank you. When are we expecting this functionality and new release?


Piotr Glejzer staff commented 2 weeks ago

Probably the next Monday


salman1410 pro premium commented 2 weeks ago

@Piotr GlejzerNext Monday means Monday coming on 16th Mar,2020 right?


Piotr Glejzer staff commented 2 weeks ago

Yes, thats right


salman1410 pro premium commented a week ago

@Piotr Glejzer Thank you, brother. Please guide how to make tasks as links? I did not find it in the documentation.


Piotr Glejzer staff commented a week ago

I will update the documentation today, I forgot about that. Sorry about that problem.


salman1410 pro premium commented 4 days ago

@Piotr Glejzer still I do not see it in documentation.


Piotr Glejzer staff commented 2 days ago

we have some problem to update this site.. Sorry about that. We will try to resolve that as soon as possible. You can check this also in our demo app if you download the zip from your profile.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • 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