Pada artikel kali ini, saya akan mengajarkan membuat calendar dengan langkah singkat menggunakan framework CodeIgniter. Silahkan teman-teman download terlebih dahulu, dan lakukan beberapa config. Jika sudah siap, buatlah file calendar.php pada folder Controllers.
events table
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 ; |
application/config/database.php.
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 ); |
application/controllers/CaledarController.php
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); } } |
application/views/my_calendar.php
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> <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> |