Events label not properly Working on month calendar

Event calendars & schedulers
1

Hi,

I am facing problem of Events labels displaying in Month Calendar . Actually, I made “labels=true” in my options but the problem is during some days the events are directly showing in "1 more "section even though there is only one event existing on particular day. (the event is showing properly in bottom events calendar if we select the partlicular day ). Please go through the screenshot/ attachment below,Thanks in advance.

More Info–

1. In below attachment I have a multidays event . It is not displaying the label properly.(here in below image the Event is starts from 13th Jan and ends on 18th Jan but for some days label is dispalying and other not).During some days it’s showing in "2 more " section . (the event is showing properly in bottom events calendar if we select the partlicular day ).

2. The Same thing I am facing for yearly events Here the yearly event label showing properly if event occurs on sunday particularly ( in below Image the two events are same on 5th & 6th of Jan but label displaying is not proper)… If the event occurs on other days of week again it displaying in “1 more” section even though it is the only event present on that day…

Please help me fix this issue. Thanks in advance.

image
image1130×435 6.38 KB

(upload://j0cE8c4F9QmldAYCh4AErJDNymH.png)

EDITED

2

Hi @dinesh_bussa :wave:

Can you share some of your relevant code?
So I can see the exact usage.

3

Hi @Zsombor ,

My settings are –

Settings: MbscEventcalendarOptions = {
   theme: "ios",
    display: "inline",
    calendarHeight: 700,
    yearChange: true,
    view: {
      calendar: { type: "month", labels: true, popover: false }
    },

 onEventSelect: (event, inst) => {
      this.eventLabel = true;
      this.selectedEvent = event.event.originalItem;
    },
}

and my json type is;

{
  allDay: boolean , 
  text: string,
  start: Date | string,
  end: Date | string, 
  d: Date | string,
  color: string
}

and my json data (dummy):-

{
  "d": "11/30",
  "text": "Deposit description",
  "color":"#a63e14", },
{
  "start":"2019-11-13T07:00:00.000Z",
  "end":"2019-11-18T08:00:00.000Z",
  "text":"Gates, Robert.",
  "color":"blue" 
}
4

Hi @dinesh_bussa,

Unfortunately I could not reproduce this.
Here’s the sample data I tested with:

[{
    "d": "01/05",
    "text": "Deposit description",
    "color": "#a63e14",
}, {
    "d": "01/06",
    "text": "Deposit description",
    "color": "#a63e14",
}, {
    "start": "2020-01-13T07:00:00.000Z",
    "end": "2020-01-25T08:00:00.000Z",
    "text": "Gates, Robert.",
    "color": "blue"
}],

And it shows up correctly:

eventcalendar
eventcalendar963×570 13 KB

Please send a runnable example demonstrating the issue to the support, so we can take a look.

5

Hi @isti,

Thanks for your response. I have mentioned data string below which I am using, I also attached the output screenshot (calendar image). The Problem I have observed is,When the start date of an Multi-day event is hidden in “X more” section due to many events on that date, then that particular event is hiding in “X more” section for that current week and it’s quite normal in next week…Please help me to fix it…PFA the screenshot & Data string.

You can see the dates on 12th Nov - 15th Nov even there are no Events on those day’s the Event is hidden in "X more " section because the start date of that event is hidden.

`[
{ “start”: “2019-10-28T07:00:00.000Z”, “end”: “2019-11-02T08:00:00.000Z”, “text”: " dummy Product team mtg.", “color”: “violet” },

{ "start": "2019-11-04T07:00:00.000Z", "end": "2019-11-08T08:00:00.000Z", "text": "Product team mtg.", "color": "#f67944" },
{ "start": "2019-11-04T07:00:00.000Z", "end": "2019-11-08T08:00:00.000Z", "text": " 123 Product team mtg.", "color": "indigo" },
{ "start": "2019-11-04T07:00:00.000Z", "end": "2019-11-08T08:00:00.000Z", "text": " 123 Product team mtg.", "color": "indigo" },
{ "start": "2019-11-11T07:00:00.000Z", "end": "2019-11-15T08:00:00.000Z", "text": "Product team mtg.", "color": "red" },

{
    "d": "11/11",
    "text": "Luke BD jan",
    "color": "#37bbe4"
},
{
    "d": "11/11",
    "text": "Luke BD jan",
    "color": "#37bbe4"
},
{ "start": "2019-11-11T07:00:00.000Z", "end": "2019-11-15T08:00:00.000Z", "text": "Product team mtg.", "color": "yellow" },

{
    "d": "11/18",
    "text": "Luke BD jan",
    "color": "#37bbe4"
},

{ "start": "2019-11-18T07:00:00.000Z", "end": "2019-11-22T08:00:00.000Z", "text": " testing Product team mtg.", "color": "#blue" },
{
    "d": "11/25",
    "text": "Luke BD jan",
    "color": "#37bbe4"
},
{
    "d": "11/18",
    "text": "Luke BD jan",
    "color": "#37bbe4"
},
{ "start": "2019-11-25T07:00:00.000Z", "end": "2019-11-29T08:00:00.000Z", "text": "production show more 123 .", "color": "#green" },
{ "start": "2019-11-18T07:00:00.000Z", "end": "2019-11-29T07:15:00.000Z", "text": "testing show more", "color": "#6e7f29" },]`

image
image1695×693 22.6 KB

6

Thanks for the details!

The last image you sent displays the data correctly. Once an event begins in the “more” section of a day, it will be displayed in the “more” section for the following days as well, otherwise it might be confusing to identify the start of the event visually. This is how other calendars handle this as well, so I don’t see an issue here.

What looks like a problem though it’s on the first image you sent in the first post, on the 5th and 6th days, where the event on the 6th is displayed in the “1 more” section, while there are no other events for the day, and there’s no “more” section on the previous day as well. However I could not replicate this, that’s why I was asking for data to reproduce.

7

Hi @isti,

Thanks for your response, If the start date goes into “more” section then it will be showing in “more” section for the following days in current week and from the next week it will be displaying as normal label functionality if that event extends for 2 weeks, isn’t it?. If it is basic calendar functionality, then it’s fine for me.Earlier I thought something is wrong with my code. Thanks again .