Fomantic-ui: Calendar show Events and there details

[crewow]

Feature Request

Calendar show Events and there details

Description

Explain what you want in great detail

Example

we can add colors to dates, plus on click we can see events and their details.

Testcase (when possible)

For meetings, appointments show details in table will be even better.

this is also good example https://demo.mobiscroll.com/javascript/eventcalendar/mobile-month-view#, https://demo.mobiscroll.com/javascript/eventcalendar/week-view-with-daily-events# and https://demo.mobiscroll.com/javascript/eventcalendar/event-list-agenda#

Screenshot (when possible)

[exoego]

As a end-user of app, showing details of dates sounds very nice feature to have 👍

However, maybe the name is a little confusing...
Calendar module is not supposed to be a self-contained calendar app, it is designed as a date piker, as same as other Semantic UI/Fomantic UI modules are single-responsible building blocks.

IMHO, such righ calendar should be implemented by combinating with SUI/FUI components.

[ColinFrick]

I agree with @exoego
What we could do is extend the disabledDates tooltip functionality, to allow adding infos to any date:

see #211

[lubber-de]

Agreed to @ColinFrick and @exoego :What is coming to my mind is eventDates with similar functionality as disabledDates and the additional option for each date to add a className to a cell (Basically to color it)

[lubber-de]

Implemented eventDates option according to my suggestion above in #677
See http://jsfiddle.net/nc0yutq2/

[jamessampford]

@lubber-de Looks pretty cool - though if there were multiple events on the same date, how could this possibly be handled? Could html tags be used within the message? Would this also work with times and could the date inherit the time colour?

I'm also wondering if an onClick handler could be made available upon selecting a particular event date (possibly with the default handler), in order to not send the date back and allow some further action to happen. For example blue entries run a different function to purple ones, say. This may be more useful for the inline calendar, but could also be a good addition.

[lubber-de]

@jamessampford

Multiple events on the same day

As of now, the tooltips are done using css pseudo selectors only because of simplicity and performance. Therefore html is currently not possible within a message.
As this needs much more additional work to the current codebase (like managing real js popup without generating additional markup for each cell) and testing we might implement that in an additional, later, PR

Supporting coloring of timeslots

Basically it would work with times also, but for now it's limited to the day selection only. For the same reason the time selection __could__ get the same color. But that would mean, if I want to color only some time slots of a date, I would have to supply the same date (including time) several times with the current logic. But that's a bad concept, so I would implement another option like timeSlots. That would keep the current logic without breaking it.
Again, I like the idea but would provide such feature in a separate, later, PR

onClick event for cell selection

I think this is reasonable and easy to implement. I'll add this to the current event PR this evening 😊

[lubber-de]

As promised i added onSelect to #677, so you can do whatever you need when an item (regardless if day or time) was clicked. Returning false will prevent the selection

$('.ui.calendar').calendar({
  onSelect: function(date,mode) {
    console.log('You have chosen',date,'in mode',mode);
    if(mode!=='day') {
      console.log('You cannot select anything else than a day!');
      return false;
    }
  }
});

See it in action here: http://jsfiddle.net/c7kLvef4/

[qroft]

As promised i added onSelect to #677, so you can do whatever you need when an item (regardless if day or time) was clicked. Returning false will prevent the selection

$('.ui.calendar').calendar({
  onSelect: function(date,mode) {
    console.log('You have chosen',date,'in mode',mode);
    if(mode!=='day') {
      console.log('You cannot select anything else than a day!');
      return false;
    }
  }
});

See it in action here: http://jsfiddle.net/c7kLvef4/

Do you see any chance on getting the message too? At the moment i found a super simple solution to use this calendar as some kind of ad-banner management. It is extremly user unfriendly at the moment but if the message could be thrown, then the whole calendar as it is could be used as something to show certain images or content on a given date.