Codeigniter Implement Fullcalendar Example Tutorial

In first table we must have one table with some dummy records. For this example i will create “events” table and dummy records as like bellow query:

    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);
    }

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);

}

In last step, we have to create view file, we will create new view file “my_calendar.php” on views folder and put bellow code on that file

<!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>

<!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>

Dibaca: 9,751

Baca Juga

Rekomendasi untuk kamu