waifung0207 / ci_bootstrap_3

A multi-tenant website template based on CodeIgniter 3 with integration of some useful tools
MIT License
385 stars 316 forks source link

Help to implement fullcalendar module #93

Open vcazacu opened 7 years ago

vcazacu commented 7 years ago

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

acorrias commented 7 years ago

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

`

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

/**

vcazacu commented 7 years ago

Thx. I try to find a solution...

andymnc commented 7 years ago

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" ]