Codeigniter Implement Fullcalendar Example Tutorial

CREATE TABLE IF NOT EXISTS `events` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `title` varchar(255) NOT NULL,

  `start_date` date NOT NULL,

  `end_date` date NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

1

2

3

4

5

6

7

8

9

10

11

12

13

CREATE TABLE IF NOT EXISTS `events` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`title` varchar(255) NOT NULL,

`start_date` date NOT NULL,

`end_date` date NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


$active_group = 'default';
$query_builder = TRUE;


$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => 'root',
	'database' => 'test',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';

$query_builder = TRUE;

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => 'root',

'database' => 'test',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
   
class CaledarController extends CI_Controller {
   
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function __construct() {
       parent::__construct();
       $this->load->database();
    }
    
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function index()
    {
        $data['result'] = $this->db->get("events")->result();
   
        foreach ($data['result'] as $key => $value) {
            $data['data'][$key]['title'] = $value->title;
            $data['data'][$key]['start'] = $value->start_date;
            $data['data'][$key]['end'] = $value->end_date;
            $data['data'][$key]['backgroundColor'] = "#00a65a";
        }
           
        $this->load->view('my_calendar', $data);
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class CaledarController extends CI_Controller {

/**

* Get All Data from this method.

*

* @return Response

*/

public function __construct() {

parent::__construct();

$this->load->database();

}

/**

* Get All Data from this method.

*

* @return Response

*/

public function index()

{

$data['result'] = $this->db->get("events")->result();

foreach ($data['result'] as $key => $value) {

$data['data'][$key]['title'] = $value->title;

$data['data'][$key]['start'] = $value->start_date;

$data['data'][$key]['end'] = $value->end_date;

$data['data'][$key]['backgroundColor'] = "#00a65a";

}

$this->load->view('my_calendar', $data);

}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
</head>
<body>
  
<div class="container">
    <h1>Codeigniter Fullcalendar example - ItSolutionStuff.com</h1>
    <div class="row" style="width:50%">
       <div class="col-md-12">
           <div id="calendar"></div>
       </div>
    </div>
</div>
   
<script type="text/javascript">
   
    var events = <?php echo json_encode($data) ?>;
    
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
           
    $('#calendar').fullCalendar({
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'month,agendaWeek,agendaDay'
      },
      buttonText: {
        today: 'today',
        month: 'month',
        week : 'week',
        day  : 'day'
      },
      events    : events
    })
</script>
   
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Codeigniter Fullcalendar example - ItSolutionStuff.com</h1>

</div>

var events = <?php echo json_encode($data) ?>;

var date = new Date()

var d = date.getDate(),

m = date.getMonth(),

y = date.getFullYear()

$('#calendar').fullCalendar({

header : {

left : 'prev,next today',

center: 'title',

right : 'month,agendaWeek,agendaDay'

},

buttonText: {

today: 'today',

month: 'month',

week : 'week',

day : 'day'

},

events : events

})

</script>

</body>

</html>