scroll JTEventCalendar

Post Reply
LEONARDO19712
Posts: 84
Joined: Sun Mar 17, 2013 1:15 pm

scroll JTEventCalendar

Post by LEONARDO19712 » Tue Mar 03, 2015 5:54 pm

hello jon I'm trying to use the jteventcalendar and want to put more than 5 events in each day but I see that the size of the component is fixed and does not display a scroll when it is very large amount of data , the question is how I can see the entire component with their full run-time events and how I can upload events from a database , thanks.

jomitech
Site Admin
Posts: 1921
Joined: Wed Oct 08, 2008 12:23 am

Re: scroll JTEventCalendar

Post by jomitech » Thu Mar 05, 2015 9:26 am

You could use CSS to add scrolling ability to each cell in the calendar, but I'd recommend using a pop-up dialog to show all the events if there's more than 3 for a particular day.

To load the events from a database table, set the Datasource, TitleField and DateField properties. The TitleField is the caption shown in the calendar, and the DateField should contain the date of the event.
Jon

LEONARDO19712
Posts: 84
Joined: Sun Mar 17, 2013 1:15 pm

Re: scroll JTEventCalendar

Post by LEONARDO19712 » Thu Mar 05, 2015 5:13 pm

Hi thanks for the replies and succeeds in making the connection to the database and effectively the result is shown in the calendar , but not how to do the pop -up dialog where you can view events , you can tell me by way of example how to do it because I have no idea how to do , thank you.

jomitech
Site Admin
Posts: 1921
Joined: Wed Oct 08, 2008 12:23 am

Re: scroll JTEventCalendar

Post by jomitech » Mon Mar 09, 2015 5:31 pm

Do something like this:

1. Drop a JTDivWindow component on the page, call it something like EventWindow.

2. Add a Label component into the JTDivWindow, call it something like EventLabel.

3. Drop a JTJavascript component on the page, and add the following code into the Code property:

Code: Select all

$(function () {
    // For each event calendar cell
    $("td.jteventcalendarcell_date").each(function () {
        var $td = $(this);
        var $events = $td.find("span.jteventcalendarevent");
    
        // If there's more than 3 events in this cell
        if ($events.length > 3) {
            var $eventNodes = $td.find(":not(div)").remove();
        
            var $link = $('<a href="#">')
                .text($events.length + ' event(s)')
                .click(function (e) {
                    e.preventDefault();
                    
                    $("#EventLabel").empty().append($eventNodes);
                    EventWindow.Show();
                });
                
            $td.append($link);
        }
    });
});
Jon

Post Reply