1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: MDB Calendar

salman1410 premium asked 4 years 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 4 years 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

Vlad Bogomolov free answered 4 years ago

We waiting new release Piotr. I hope you fix MDB Datepickerv5 ( I cannot see default value, disable dates UI has some bugs.. ).And now we have a problem with modal...

Piotr Glejzer staff commented 4 years ago

You can write what kind of bugs you found, I will make a list with that to fix it.
We don't have a release now and this is not dependent on me. Sorry about that.

salman1410 premium answered 4 years 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 4 years ago

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

salman1410 premium commented 4 years ago

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

Piotr Glejzer staff commented 4 years 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 premium commented 4 years 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 4 years 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 premium commented 4 years ago

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

Piotr Glejzer staff commented 4 years ago

Probably the next Monday

salman1410 premium commented 4 years ago

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

Piotr Glejzer staff commented 4 years ago

Yes, thats right

salman1410 premium commented 4 years 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 4 years ago

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

salman1410 premium commented 4 years ago

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

Piotr Glejzer staff commented 4 years 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.

sameedkhan25 pro commented 4 years ago

@Piotr Glejzer I am working along with @salman1410 in this , i dont want to create separate thread for this but to discuss here so it would be easy for you to follow up

we want to add two functionalities 1) size of buttons at the top with month-week-list and <,>,today are very big in size , so we need functionality to customize this size2) we want to add a flag button in the task placed in the day of calendar,let me know when i will get these functionality.thank you

link of screenshots attached :https://drive.google.com/open?id=17P4itp8EWUr55ALHptKymKvOqqbBbz8W

Piotr Glejzer staff commented 4 years ago

Ok, I will check everything in the next week and try to add to the next release.

sameedkhan25 pro commented 4 years ago

@Piotr GlejzerThank you so much , we really need that modifications in our project and we have short time left. it would be highly appreciated if you get it done soon. thank you again man !

Piotr Glejzer staff commented 4 years ago

what this flag button have to do?

sameedkhan25 pro commented 4 years ago

I want to add a favourite and unfavourite in the ticket screenshot is attached to guide you better

https://drive.google.com/open?id=1bwrz_xSbaxMKiGE51bOQTDO9OITgaYVU

sameedkhan25 pro commented 4 years ago

@Piotr Glejzer I have checked the latest release , but both of my queries are not yet resolved , kindly pay some heed on these issues, we are stuck because of this, it will be very much appreciated, thank you do let me know if you are still not clear about the requirements.

Piotr Glejzer staff commented 4 years ago

I added the new properties about sizes/colors but information about the flag was conveying too late, so I will try to add in this release.

sameedkhan25 pro commented 4 years ago

@Piotr Glejzerthank you so much, kindly do the flag part as well. thanks again

Piotr Glejzer staff commented 4 years ago

Hi, I know that you are waiting for this 'flag' upgrade but it will not show in this release. I didn't have time to make ( very busy 2-weeks ). If you really need this, our marketing will probably release a new version of products this week so you can upgrade your calendar subscription to have access to our GitLab repo with the calendar plugin and you can change everything how you want. I'm very sorry about that. Have a nice day.

sameedkhan25 pro commented 4 years ago

@Piotr Glejzer i have already upgraded the plan and i have been access to gitlab repo since the start but still i want you to add this functionality for me because i need to understand all the details to implement it by myself. it would be highly appreciated if you provide me with this update. its been 3 weeks i hope it is being implemented by you.

sameedkhan25 pro commented 4 years ago

@Piotr Glejzer Waiting for your response buddy , there is one more issue i want to discuss about calendar , when we select any month (lets say April)other than current month(June) and go to some event on clicking using link prop , when we go back from that task page we are on the Current month (June) no on the (april )month , kindly in the next release provide something to tackle this issue Thank you

Piotr Glejzer staff commented 4 years ago

The next release is probably in the next month. We are working on the new project now and any technology ( jq, vue, angular also) doesn't make a release before we didn't finish it.

sameedkhan25 pro commented 4 years ago

ok @Piotr Glejzer I am waiting for your update , you are your team are doing great job. make sure to include both updates (flag, current month ) in this release. thank you

sameedkhan25 pro commented 4 years ago

Hey @Piotr Glejzer i hope you are doing great its been a while since our last conversation.i want to know have you fixed and update with the issues and tasks.

one more thing can you add property of color for tickets , custom colors with any hexacodethanks in advance

Piotr Glejzer staff commented 4 years ago

is that all want you to add or something else?

sameedkhan25 pro commented 4 years ago

there are some other issues as well I have mentioned earlier you can see my previous comment I will also summarise them here:

1) when we select any month (lets say April)other than current month(June) and go to some event on clicking using link prop , when we go back from that task page we are on the Current month (June) no on the (april )month ,

2)we want to add a flag button(with favourite and unfavourite functionality) in the task placed in the day of the calendar, see screenshot https://drive.google.com/file/d/1bwrz_xSbaxMKiGE51bOQTDO9OITgaYVU/view

3) I am facing an issue I want to do initailscrollY in the mdbtable when the component mounts. is there any solution available where i can initially scroll to the specific position i am currently using react-infinite-scroll but its props are not working with mdbtable

Piotr Glejzer staff commented 4 years ago

Ok, I added these problems to our task to do to improve a calendar plugin.

sameedkhan25 pro commented 4 years ago

can you letme know when its done ?

Piotr Glejzer staff commented 4 years ago

we don't have an ETA for releases for now. Probably in 2/4 weeks maybe will change something about that.

salman1410 premium answered 4 years 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 4 years 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 premium commented 4 years 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 4 years 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 premium commented 4 years ago

@Piotr Glejzer Thank you so much it worked.

salman1410 premium answered 4 years ago

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

Piotr Glejzer staff commented 4 years ago

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

salman1410 premium commented 4 years ago

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

Piotr Glejzer staff commented 4 years 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 premium commented 4 years 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.

sameedkhan25 pro commented 4 years ago

@Piotr Glejzer I am working along with @salman1410 in this , i dont want to create separate thread for this but to discuss here so it would be easy for you to follow up

we want to add two functionalities
1) size of buttons at the top with month-week-list and <,>,today are very big in size , so we need functionality to customize this size 2) we want to add a flag button in the task placed in the day of calendar, let me know when i will get these functionality. thank you

link of screenshots attached :https://drive.google.com/open?id=17P4itp8EWUr55ALHptKymKvOqqbBbz8W

sameedkhan25 pro commented 4 years ago

@Piotr Glejzer we are waiting for your response , our deadline is near and this functionality needs to be added in the system.

Piotr Glejzer staff answered 4 years 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 4 years 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 4 years 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 4 years 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 4 years ago

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

salman1410 premium answered 4 years 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 4 years 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 4 years ago

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

Piotr Glejzer staff commented 4 years ago

your welcome :)

salman1410 premium commented 4 years ago

@Piotr Glejzer Any updates on above functionalities?

Piotr Glejzer staff commented 4 years 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 4 years ago

@Piotr GlejzerAny luck with our updates in new release?

Piotr Glejzer staff commented 4 years ago

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

Piotr Glejzer staff answered 4 years 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 4 years 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 4 years 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 4 years 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 4 years 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 4 years 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 4 years 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 4 years 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 years ago

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

salman1410 premium answered 4 years 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 4 years 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.
Write
Create snippet
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
  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.24.0
  • Device: Lenovo Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
pro-plugins mdb-calendar-usage
About author
salman1410
Premium support 105Support score
5Questions 8Answers 0Snippets