Help to implement fullcalendar module

Question

Help to implement fullcalendar module

vcazacu opened this issue 8 years ago · 3 comments

Firstly I want to thank for this framework. Good job!
Technically it is not a issue. I have spent couple days trying to implement schedule_calendar (https://fullcalendar.io/scheduler/download/).
Please, can anybody help me to implement that module? I have a issue with css.
Did make anybody this? Can help me?
Sorry for my English...

Answer 1 · 2017-01-09T18:34:07.000Z

HI
I'm going to include calendard samples. I manage to insert into view sample code provided with adminlte. Controller seems to be more easy (without the data event retrieving from db). But I have problems with jquery.

But I got some errors
Uncaught TypeError: Cannot read property 'options' of undefined
at HTMLDocument. (adminlte.min.js:10)
at l (adminlte.min.js:2)
at Object.fireWith [as resolveWith] (adminlte.min.js:2)
at Function.ready (adminlte.min.js:2)
at HTMLDocument.s (adminlte.min.js:1)
jquery.min.js:2 jQuery.Deferred exception: $(...).draggable is not a function TypeError: $(...).draggable is not a function
at HTMLDivElement. (http://localhost/cib5/admin/calendar/main:379:17)
at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:2815)
at r.fn.init.each (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:1003)
at ini_events (http://localhost/cib5/admin/calendar/main:367:11)
at HTMLDocument. (http://localhost/cib5/admin/calendar/main:388:5)
at j (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948)
at k (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).draggable is not a function
at HTMLDivElement. (main:379)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at ini_events (main:367)
at HTMLDocument. (main:388)
at j (jquery.min.js:2)
at k (jquery.min.js:2)

this is the view
`

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-3">
      <div class="box box-solid">
        <div class="box-header with-border">
          <h4 class="box-title">Eventi posizionabili</h4>
        </div>
        <div class="box-body">
          <!-- the events -->
          <div id="external-events">
            <div class="external-event bg-green">a1</div>
            <div class="external-event bg-yellow">a2</div>
            <div class="external-event bg-aqua">a3</div>
            <div class="external-event bg-light-blue">a4</div>
            <div class="external-event bg-red">a5</div>
            <div class="external-event bg-lime">a6</div>
			<div class="external-event bg-purple">a7</div>
			<div class="checkbox">
              <label for="drop-remove">
                <input type="checkbox" id="drop-remove">
                Elimina dopo posizionamento
              </label>
            </div>
          </div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /. box -->
      <div class="box box-solid">
        <div class="box-header with-border">
          <h3 class="box-title">Create un evento</h3>
        </div>
        <div class="box-body">
          <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
            <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
            <ul class="fc-color-picker" id="color-chooser">
              <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
              <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
            </ul>
          </div>
          <!-- /btn-group -->
          <div class="input-group">
            <input id="new-event" type="text" class="form-control" placeholder="Titolo dell'evento">

            <div class="input-group-btn">
              <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Aggiungi</button>
            </div>
            <!-- /btn-group -->
          </div>
          <!-- /input-group -->
        </div>
      </div>
    </div>
    <!-- /.col -->
    <div class="col-md-9">
      <div class="box box-primary">
        <div class="box-body no-padding">
          <!-- THE CALENDAR -->
          <div id="calendar"></div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /. box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.content -->

"); event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event"); event.html(val); $('#external-events').prepend(event); //Add draggable funtionality ini_events(event); //Remove event from text input $("#new-event").val(""); }); }); </script>

`

this is my controller
`<?php
defined('BASEPATH') OR exit('No direct script access allowed');

/**

Admin Panel management, includes:
- Admin Users CRUD
- Admin User Groups CRUD
- Admin User Reset Password
- Account Settings (for login user)
  */
  class Calendar extends Admin_Controller {
protected $mAR = '';

public function __construct()
{
parent::__construct();
$this->load->library('form_builder');
// initial setup
$this->_setup2();
}

private function _setup2() {
...prepare some data...
}
Public function main() {
$this->mViewData['count'] = array(
'lbl1' => '',
'lbl2' => '',
'lbl3' => '',
'lbl4' => '',
'val1' => '',
'val2' => '',
'val3' => '',
'val4' => '',
);
$this->render('calendar');
}
}`

Answer 2 · 2017-01-11T20:27:01.000Z

Thx. I try to find a solution...

Answer 3 · 2017-02-03T14:32:36.000Z

the problem i see there is jquery 3.1.1.
try using also the jquery migration library 3.00 (cause of jQuery Core 3.1.1).
Or, maybe better, revert to jquery 2.2.4.
If you still have the same issue, you should try with jquery 2.2.4+jquery migration 1.4.1.

[I'm editing because i forgot... pay also attention to grocery crud and parameters like "grocery_crud_unset_jquery" ]