fullcalendar render events in month view horizonta

Question

How to render events of same day in same table cell?

I'm trying to do:

But the result it's:

I tried to use eventAfterRender, change the classes... but always same result.

Answer 1

So you are using a new plugin now. Hope the answer will help someone to achieve the same result as per your question.

So i tried to play around the plugin and do some tweaking. Iam using full calendar 3.0.1 non minified version. I opened fullcalendar.js Full calendar dont render the 'events' inside the date container 'td'. So i re-write some of the codes.

I changed the line 5445 to the blow. Changed the attribute 'data-date' to 'id'

' id="' + date.format('YYYY-MM-DD') + '"' + 

Line 6039 is the method that renders the events to the calendar. I changed it to the below.

fgSegHtml: function(seg, disableResizing) {
// Find the td with 'id date' that i changes above and append the span to the date as per the received events. I have also added the className that got from the json events file, so that we can write styles for the classname to make it interactive. 

$('#' + seg.event.start._i.split('T')[0]).append('<span class="event-dot ' + seg.event.className[0] +'">&nbsp;</span>'); 

return false; // Stop default event rendering

Also added some styles for displaying it correctly i.e., align center, margin etc..

<style>
.event-dot {
height: 10px;
width: 10px;
border-radius:50%;
background-color: #4a90e2;
margin:0 auto;
display:inline-block;
margin: 0px 2px;
}

.fc th, .fc td {
vertical-align: middle !important;
text-align: center;
}
</style>

Then you can achieve something like below. Please let me know if you have any more questions. (Right now i have added the color for dot commonly in 'event-dot' class. you can write diferent dot colors using the appended different 'className' from events json )

For making the rounded selection on the selected date you can use the 'dayClick' method in fullcalendar. Just google it and you can find many ways to achieve this by adding styles to selected date using jQuery.