Calendar Using JavaScript/ PHP/ MySQL

Calendar using Javascript/ PHP/ mySQL

Top tip for developing your own calendar: don't. Calendars are such a time sink, and non-trivial to write. If you need to ask for tips you'd be better off with an existing library component like you'll find in jQuery, dojo, etc..

This question has been asked many times here, links abound on other questions.

• Best JavaScript Calendar control

• What is the best calendar pop-up for populating a web form?

• Creating A Javascript Calendar (Full, not pop up)

etc, etc...

PHP MySQL 7 Day , weekly, Mon-Fri Calendar with pagination?

To select a week you could do something like

set @weekday:= dayofweek(@adate);  
set @StartOfWeek:= date_sub(@adate,INTERVAL @weekday DAY);  
set @EndOfWeel:= date_add(@adate,INTERVAL (7- @weekday) DAY);  

Then to select the week I'd do

SELECT * FROM TableWithEvents  
WHERE TableWithEvents.EventDate 
      BETWEEN date_sub(@adate,interval @weekday day) 
      AND date_add(@date,INTERVAL (7-@weekday) DAY);

Note that using
@adate - @weekday will not work, you must use date_sub/date_add with the silly interval syntax.
It does work rather nice when adding months, where it correctly adds the number of days in a month or with years where it knows about leap years (but I digress).

For the pagination you can use the above SELECT with limit start, end; like so:

SELECT * FROM sometable WHERE some_where_thingy LIMIT 0,20;

O and don't forget to add an index to the EventDate field.

And I would recommend adding an autoincrement primary key named id to the table with events.

That way you can uniquely link to that particular event in some other table, like so:

Table FavEvents:   
- id: integer (autoinc primary)  
- Event_id: integer (link to your event)  
- FanName: varchar(x) (name of user you loves event or what ever)

Then you can select "bill"s fav events like so:

SELECT * FROM FavEvents  
INNER JOIN Events ON (FavEvents.Event_id = Event.id)  
WHERE FavEvents.FanName = "bill"

I never use PHP so can't help you there, good luck.

How to connect bootstrap year calendar with mysql base

A "workaround" is iterate the data array and generate a string with data in calendar format.

Here works fine, hope helps.

Sample:

private function convertYearData(array $yearData) : string
    {
        if (empty($yearData)) {
            return 'null';
        }
        $data = '';
        foreach ($yearData as $event) {
            if (empty($data)) {
                $data =  "[{id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
            } else {
                $data .=  ", {id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
            }   
        }
        $data .= ']';
        return $data;
    }

    $yearDataArr = [
        [
            'id' => '1',
            'name' => 'Pesquisa Teste',
            'type' => 'Pesquisa',
            'color' => '#4da539',
            'startDate' => '2017-04-28 02:00:00',
            'endDate' => '2017-04-30 12:00:00',
        ],
        [
            'id' => '2',
            'name' => 'Media Teste',
            'type' => 'Media',
            'color' => '#00afe8',
            'startDate' => '2017-04-25 02:00:00',
            'endDate' => '2017-05-12 12:00:00',
        ],
        [
            'id' => '3',
            'name' => 'Email Marketing Teste',
            'type' => 'Email Marketing',
            'color' => '#af2828',
            'startDate' => '2017-03-25 02:00:00',
            'endDate' => '2017-05-17 12:00:00',
        ],
    ];
    $yearData = $this->convertYearData($yearDataArr);

after, in your html just echo your var $yearDate:

$('#calendar').calendar({ 
    language:'pt',
    enableContextMenu: false,
    enableRangeSelection: true,
    selectRange: function(e) {
        editEvent({ startDate: e.startDate, endDate: e.endDate });
    },
    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].type + '</div>'
                            + '<div class="event-type">' + e.events[i].name + '</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');
        }
    },
    dayContextMenu: function(e) {
        $(e.element).popover('hide');
    },
    dataSource: <?php echo $this->yearData; ?>
});

fullcalendar.io render events with PHP/MySQL?

Create a json for events.

$events = [];
while($row = mysql_fetch_array($result)){
   $events[] = ['title' => $row['Event_Title'], 'start' => $row['Start_Date']];
}

And then, create the calendar with the $events

$('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: false,
                    events: <?= json_encode($events) ?>
                });

---

Related Topics