Fullcalendar and Select2 Pugins Integration

[tmgomas]

I am trying to implement Select2 and Calender in my project but it does not work, anyone can help

[dfsmania]

Hi @tmgomas , give a read to issue #777 that discusses the steps on how to use a plugin with the package. You have the option to use CDN files on the plugins configuration of adminlte.php file or to use local files, that you usually install with the command artisan adminlte:plugins install --plugins=<plugin_key>. Also, read the wiki pages:

• Plugins Configuration
• Artisan Plugins Command

[tmgomas]

Hi @tmgomas , give a read to issue #777 that discusses the steps on how to use a plugin with the package. You have the option to use CDN files on the plugins configuration of adminlte.php file or to use local files, that you usually install with the command artisan adminlte:plugins install --plugins=<plugin_key>. Also, read the wiki pages:

• Plugins Configuration
• Artisan Plugins Command

Thank You , Select 2 is working what about Full calender

[dfsmania]

what about Full calender

Please, share your plugin configuration for fullCallendar and what is the problem you are facing. Also, share the code that shows how are you using it.

[tmgomas]

@section('content') @section('plugins.Fullcalendar', true);

      <div class="col-md-9">
        <div class="card card-primary">
          <div class="card-body p-0">
            <!-- THE CALENDAR -->
            <div id="calendar"></div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>
            </div>
        </div>
    </div>
</div>
@push('js')
<script>

$(function () {

/* initialize the external events
 -----------------------------------------------------------------*/
function ini_events(ele) {
  ele.each(function () {

    // create an Event Object (https://fullcalendar.io/docs/event-object)
    // it doesn't need to have a start or end
    var eventObject = {
      title: $.trim($(this).text()) // use the element's text as the event title
    }

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject)

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex        : 1070,
      revert        : true, // will cause the event to go back to its
      revertDuration: 0  //  original position after the drag
    })

  })
}

ini_events($('#external-events div.external-event'))

/* initialize the calendar
 -----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date()
var d    = date.getDate(),
    m    = date.getMonth(),
    y    = date.getFullYear()

var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendar.Draggable;

var containerEl = document.getElementById('external-events');
var checkbox = document.getElementById('drop-remove');
var calendarEl = document.getElementById('calendar');

// initialize the external events
// -----------------------------------------------------------------

new Draggable(containerEl, {
  itemSelector: '.external-event',
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText,
      backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
      borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
      textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
    };
  }
});

var calendar = new Calendar(calendarEl, {
  headerToolbar: {
    left  : 'prev,next today',
    center: 'title',
    right : 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  themeSystem: 'bootstrap',
  //Random default events
  events: [
    {
      title          : 'All Day Event',
      start          : new Date(y, m, 1),
      backgroundColor: '#f56954', //red
      borderColor    : '#f56954', //red
      allDay         : true
    },
    {
      title          : 'Long Event',
      start          : new Date(y, m, d - 5),
      end            : new Date(y, m, d - 2),
      backgroundColor: '#f39c12', //yellow
      borderColor    : '#f39c12' //yellow
    },
    {
      title          : 'Meeting',
      start          : new Date(y, m, d, 10, 30),
      allDay         : false,
      backgroundColor: '#0073b7', //Blue
      borderColor    : '#0073b7' //Blue
    },
    {
      title          : 'Lunch',
      start          : new Date(y, m, d, 12, 0),
      end            : new Date(y, m, d, 14, 0),
      allDay         : false,
      backgroundColor: '#00c0ef', //Info (aqua)
      borderColor    : '#00c0ef' //Info (aqua)
    },
    {
      title          : 'Birthday Party',
      start          : new Date(y, m, d + 1, 19, 0),
      end            : new Date(y, m, d + 1, 22, 30),
      allDay         : false,
      backgroundColor: '#00a65a', //Success (green)
      borderColor    : '#00a65a' //Success (green)
    },
    {
      title          : 'Click for Google',
      start          : new Date(y, m, 28),
      end            : new Date(y, m, 29),
      url            : 'https://www.google.com/',
      backgroundColor: '#3c8dbc', //Primary (light-blue)
      borderColor    : '#3c8dbc' //Primary (light-blue)
    }
  ],
  editable  : true,
  droppable : true, // this allows things to be dropped onto the calendar !!!
  drop      : function(info) {
    // is the "remove after drop" checkbox checked?
    if (checkbox.checked) {
      // if so, remove the element from the "Draggable Events" list
      info.draggedEl.parentNode.removeChild(info.draggedEl);
    }
  }
});

calendar.render();
// $('#calendar').fullCalendar()

/* ADDING EVENTS */
var currColor = '#3c8dbc' //Red by default
// Color chooser button
$('#color-chooser > li > a').click(function (e) {
  e.preventDefault()
  // Save color
  currColor = $(this).css('color')
  // Add color effect to button
  $('#add-new-event').css({
    'background-color': currColor,
    'border-color'    : currColor
  })
})
$('#add-new-event').click(function (e) {
  e.preventDefault()
  // Get value and make sure it is not null
  var val = $('#new-event').val()
  if (val.length == 0) {
    return
  }

  // Create events
  var event = $('<div />')
  event.css({
    'background-color': currColor,
    'border-color'    : currColor,
    'color'           : '#fff'
  }).addClass('external-event')
  event.text(val)
  $('#external-events').prepend(event)

  // Add draggable funtionality
  ini_events(event)

  // Remove event from text input
  $('#new-event').val('')
})

}) @endpush('js') @stop

____--

'Fullcalendar' => [ 'active' => false, 'files' => [ [ 'type' => 'js', 'asset' => true, 'location' => 'vendor/fullcalendar/bootstrap/main.min.js', ], [ 'type' => 'css', 'asset' => true, 'location' => 'vendor/fullcalendar/bootstrap/main.min.css', ], ], ],```

@Shidersz

[dfsmania]

@tmgomas Dude, that is too much code. You always need to start with a basic example. I just manage to get it work on my environment. These where the steps:

Step 1)

Always check the plugin version. After installing the fullcalendar and fullcalendar-plugins with php artisan adminlte:plugins --plugin="fullcalendar" --plugin="fullcalendarPlugins" and inspecting the files, you can see that the installed version is FullCalendar v4.4.0. Note you can use the current version 5.4 by downloading and installing the files on your's project public/vendor folder or use CDN files.

Step 2)

Read documentation for the installed version, for bootstrap4 is here: https://fullcalendar.io/docs/v4/bootstrap-theme

Step 3)

Make plugin configuration on adminlte.php file, this is the one I have for the version 4.4.0. May be different files for other version:

'FullCalendar' => [
    'active' => false,
    'files' => [
        // Core
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/fullcalendar/main.min.js',
        ],
        [
            'type' => 'css',
            'asset' => true,
            'location' => 'vendor/fullcalendar/main.min.css',
        ],
        // Daygrid plugin.
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/fullcalendar-plugins/daygrid/main.min.js',
        ],
        [
            'type' => 'css',
            'asset' => true,
            'location' => 'vendor/fullcalendar-plugins/daygrid/main.min.css',
        ],
        // Bootstrap 4 plugin.
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/fullcalendar-plugins/bootstrap/main.min.js',
        ],
        [
            'type' => 'css',
            'asset' => true,
            'location' => 'vendor/fullcalendar-plugins/bootstrap/main.min.css',
        ],
    ],
],

Step 4)

Use the plugin as per indicated on the documentation. This is my working example:

@section('plugins.FullCalendar', true)
...
<div id="fcalendar"></div>
...
@push('js')
<script>

    $(document).ready(function() {

        // Test Fullcalendar

        var calendarEl = document.getElementById('fcalendar')

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['bootstrap', 'dayGrid'],
            themeSystem: 'bootstrap'
        });

        calendar.render();

    });

</script>
@endpush

Please note this is not a package ISSUE, and we don't always have the time to help with these custom integrations

[tmgomas]

@Shidersz

Thanks, It's work

[dfsmania]

@tmgomas Pease, consider changing title of the issue to: Fullcalendar and Select2 Pugins Integration. That way may help future users that search on the closed issues...