Esta es la misma codificación de la versión (1), pero en vez de utilizar las librerías de Daypilot para mostrar el calendario se ha utilizado la libreria de FullCalendar, que es open source y hay que contratar nada para utilizarla.

Además, utiliza los recursos de Boostrap, por lo que a nivel visual se integra perfectamente con el resto de la aplicación.

También, otra funcionalidad que se puesto es que a través de Ajax, carga las reuniones que se ajustan al mes que se está consultando, por lo que su carga es muy rápida, puesto que sólo carga lo que va a presentar en la pantalla.

DEMO: https://fhumanes.com/meetings2

usuario: admin
password: admin

Utiliza los plugins (descargables desde este portal):

Colors.- Selección de colores.
ColorPiker.- Selección de color (este viene instalado en PHPRunner).

 

Este es el nuevo aspecto del calendario con la  nueva libreria.

Los programas cambiados son:

calendar.php ( construye la página de presentación)

<?php
global $conn;
/* Session variable
$_SESSION['project_id']
$_SESSION['project_name']
$_SESSION['option_calendar'] valor:  project | user | company | departament | meeting
$_SESSION['language']
$_SESSION['user_id']
$_SESSION['login'] 
$_SESSION['email'] 
$_SESSION['username']
$_SESSION['company_id']
$_SESSION['dept_id']
 * ----------Currently unused ------------------
$_SESSION['nav_start'];
$_SESSION['nav_end']
 * ----------------------------------------------
 */
// $site       = $_SESSION['config'][array_search('URL', array_column($_SESSION['config'], 'name'))][value].'/';
// $ajax_mes   = $_SESSION['config'][array_search('MEETINGS_AJAX', array_column($_SESSION['config'], 'name'))][value].'?';
if ($_SESSION['language'] == 'Spanish') {
    $language = 'es'; // Spanish
} else {
    $language = 'en'; // English
}
$now = substr(now(),0,10);
$str1 = <<<EOD
 <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }
    #calendar {
      max-width: 900px;
      margin: 40px auto;
    }
  </style>
<meta charset='utf-8' />
<link href='fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
<link href='fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
<link href='fullcalendar/packages/list/main.css' rel='stylesheet' />
<script src='fullcalendar/packages/core/main.js'></script>
<script src='fullcalendar/packages/interaction/main.js'></script>
<script src='fullcalendar/packages/daygrid/main.js'></script>
<script src='fullcalendar/packages/timegrid/main.js'></script>
<script src='fullcalendar/packages/list/main.js'></script>
<script src='fullcalendar/packages/core/locales-all.min.js'></script>
<script>
    var initialLocaleCode = '$language';
     
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['interaction', 'dayGrid', 'timeGrid', 'list' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      // defaultView: 'dayGridMonth',
      defaultDate: '$now',
      timeZone: 'UTC', // the default 'local' (unnecessary to specify)
      locale: initialLocaleCode,
      businessHours: {
      // days of week. an array of zero-based day of week integers (0=Sunday)
      daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
      startTime: '08:00', // a start time (08am in this example)
      endTime: '18:00', // an end time (6pm in this example)
        },
         
      weekNumbers: true,
      weekNumbersWithinDays: true,
      weekNumberCalculation: 'ISO',
       
      editable: true,
      navLinks: true, // can click day/week names to navigate views
      eventLimit: true, // allow "more" link when too many events
       
      eventClick: function(info) {
      // alert('Event: ' + info.event.title + '\\n' + info.event.id + '...' + info.event.extendedProps.description );
      // console.log(info);
      // alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
      // alert('View: ' + info.view.type);
      // change the border color just for fun
      // info.el.style.borderColor = 'red';
                        var meeting = info.event.id;
                        var url = "calendar_view.php?editid1="+meeting;
                        var header = '<h2 data-itemtype="view_header" data-itemid="view_header" data-pageid="10">'+'Meeting: '+ meeting+'</h2>' ;
                        window.popup = Runner.displayPopup({
                    url: url,
                    width: 800,
                    height: 550,
                    header: header
            });
      },
      events: {
        url: 'calendar_ajax.php'
      }
         
    });
    calendar.render();
  });
</script>
  <div id='calendar'></div>
EOD;
echo $str1;
?>

calendar_ajax.php (facilita los datos a representar en formato JSON)

<?php
require_once("include/dbcommon.php"); // DataBase PHPRunner
/* Session variable
$_SESSION['project_id']
$_SESSION['project_name']
$_SESSION['option_calendar'] valor:  project | user | company | departament | meeting
$_SESSION['language']
$_SESSION['user_id']
$_SESSION['login'] 
$_SESSION['email'] 
$_SESSION['username']
$_SESSION['company_id']
$_SESSION['dept_id']
 * ----------------------------------------------
 */
// $site       = $_SESSION['config'][array_search('URL', array_column($_SESSION['config'], 'name'))][value].'/';
// $ajax_mes   = $_SESSION['config'][array_search('MEETINGS_AJAX', array_column($_SESSION['config'], 'name'))][value].'?';
// Require our Event class and datetime utilities
require 'fullcalendar/php/utils.php';
// Short-circuit if the client did not give us a date range.
if (!isset($_GET['start']) || !isset($_GET['end'])) {
  die("Please provide a date range.");
}
// Parse the start/end parameters.
// These are assumed to be ISO8601 strings with no time nor timeZone, like "2013-12-29".
// Since no timeZone will be present, they will parsed as UTC.
$range_start = parseDateTime($_GET['start']);
$range_end = parseDateTime($_GET['end']);
// Parse the timeZone parameter if it is present.
$time_zone = null;
if (isset($_GET['timeZone'])) {
  $time_zone = new DateTimeZone($_GET['timeZone']);
}
$start = substr($_GET['start'],0,10).' 00:00:00'; 
$end   = substr($_GET['end']  ,0,10).' 00:00:00';
switch ($_SESSION['option_calendar']) {
    case 'project':
        $sql = "SELECT idmeetings id , m.name, username resource, m.start_date, m.end_date, p.color_identifier color
                FROM meetings m
                join users on ( owner = user_id )
                join projects p on (projects_project_id = project_id)
                where projects_project_id =" . $_SESSION['project_id'] . " and  m.end_date >= '$start' and m.start_date < '$end'";
        break;
    case 'user':
        $sql = "SELECT distinct idmeetings id , m.name, username resource, m.start_date, m.end_date, p.color_identifier color
            FROM meetings m
            join projects p on (m.projects_project_id = p.project_id)
            join users_meetings um on (um.meetings_idmeetings = m.idmeetings)
            join users u on ( um.users_user_id = u.user_id )
            where u.user_id =" . $_SESSION['user_id'] . " and  m.end_date >= '$start' and m.start_date < '$end'";
        break;
    case 'company':
        $sql = "SELECT idmeetings id , m.name, username resource, m.start_date, m.end_date, p.color_identifier color
            FROM meetings m
            join users u on ( owner = user_id )
            join projects p on (m.projects_project_id = p.project_id)
            join companies c on (p.companies_company_id = c.company_id)
            where c.company_id =" . $_SESSION['company_id'] . " and  m.end_date >= '$start' and m.start_date < '$end'";
        break;
    case 'departament':
        $sql = "SELECT idmeetings id , m.name, username resource, m.start_date, m.end_date, p.color_identifier color
            FROM meetings m
            join users u on ( owner = user_id )
            join projects p on (m.projects_project_id = p.project_id)
            join departments d on (p.departments_dept_id = d.dept_id)
            where d.dept_id =" . $_SESSION['departament_id'] . " and  m.end_date >= '$start' and m.start_date < '$end'";
        break;
    case 'meeting':
        $sql = "SELECT idmeetings id , m.name, u.username resource, m.start_date, m.end_date, u.color_identifier color
            FROM meetings m
            join users_meetings um on (um.meetings_idmeetings = m.idmeetings)
            join users u on ( um.users_user_id = u.user_id )
            where idmeetings <>" . $_SESSION['meeting_id'] . " and  m.end_date >= '$start' and m.start_date < '$end'";
        break;
}
$resql = db_query($sql,$conn);
// Accumulate an output array of event data arrays.
$output_arrays = array();
while ($data = db_fetch_array($resql)){
$output_arrays[] = array(
    'id'=>$data['id'],
    'title'=>$data['name'],
    'resource'=>$data['resource'],
    'start'=>$data['start_date'],
    'end'=>$data['end_date'],
    'color'=>$data['color']);
    }
// Send JSON to the client.
// $str = json_encode($output_arrays);
echo json_encode($output_arrays);
?>

Adjunto los fuentes del proyecto y para cualquier cosa, podéis poneros en contacto conmigo a través de mi email [email protected]