#1
  1. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,167
    Rep Power
    220

    How can I connect this calendar to database with php?


    Hi;

    I use Codeignitre and Bstarp calendar

    I want to load the events from database. But i am not sure how because I initiate the calendar like this
    Code:
    <script>
    $(function() {
        $('#calendar').calendar();
    });
    </script>
    How can I load events, dates etc etc in the calendar? For example if threre is an event on Jan 23rd (I load from db), chaneg the style of that day on the calendar

    Strange the source of their pages shows nothing! I am sure its a simple technology I am not familair with.
    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2016
    Posts
    87
    Rep Power
    5
    You need to populate the dataSource array. You can either statically populate it when you initiate the calendar, by setting values directly in dataSource, or you can dynamically populate it, using ajax to get the data and calling the setDataSource() method.
  4. #3
  5. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,167
    Rep Power
    220
    Oh oh never done that. Might be a better idea to use Codeigniter calendar.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2016
    Posts
    87
    Rep Power
    5
    That's quitter talk.

    The javascript you produce would look like -
    Code:
    <script>
    $(function() {
        $('#calendar').calendar({ 
    	        mouseOnDay: function(e) {
                if(e.events.length > 0) {
                    var content = '';
                    
                    for(var i in e.events) {
                        content += '<div class="event-tooltip-content">'
                                        + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                                        + '<div class="event-location">' + e.events[i].location + '</div>'
                                    + '</div>';
                    }
                
                    $(e.element).popover({ 
                        trigger: 'manual',
                        container: 'body',
                        html:true,
                        content: content
                    });
                    
                    $(e.element).popover('show');
                }
            },
            mouseOutDay: function(e) {
                if(e.events.length > 0) {
                    $(e.element).popover('hide');
                }
            },
    
            dataSource: [
                {
    		// Jan 23rd 2017
                    id: 1,
                    name: 'some event name',
                    location: 'some event location',
                    startDate: new Date(2017, 0, 23),
                    endDate: new Date(2017, 0, 23)
                }
                // additional items are added here as a comma separated list of objects
            ]
        });
    });
    </script>
    The mouseOnDay and mouseOutDay are needed if you want to duplicate the popup/tool tip they use in their examples.

    Your task would be to dynamically produce the dataSource output using php. Note: the month number in the javascript date starts at zero for January.
  8. #5
  9. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,167
    Rep Power
    220
    Ended up using Codeigniter's Calendar.

    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo