Ankündigung

Einklappen
Keine Ankündigung bisher.

Programmplan anpassen - wer kann helfen?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Programmplan anpassen - wer kann helfen?

    Hallo Kollegen,

    ich möchte einen Programmplan in einer zeitlichen Übersicht darstellen - die Inhalte habe ich auch bereits erfolgreich mit PHP in das Script implementieren können.
    http://admin.filmkunstfest-mv.de/adm...Day=2017-05-06
    Ich komme nur nicht mit der äußeren Hülle zurecht, da sie fast ausschliesslich mit Javascript geschrieben ist und ich dessen nicht so mächtig bin. Ein paar kleine Anpassungen möchte ich machen:
    • die Zeitachse auf der linken Seite soll erst ab 8 Uhr beginnen
    • die Zeitintervalle sollen alle 15min sein (und nicht wie jetzt alle 30 min)
    • schön wäre es auch, wenn die Höhe der einzelnen Zeilen veränderbar wäre
    • ich weiß nicht, wie ich mit dem onclick event umgehen soll - am liebsten würde ich dahinter einen Link zur Filmbeschreibung setzen, die sich dann beim drauf klicken in einem neuen Fenster öffnet
    Ich poste euch den Code des Scriptes, vielleicht habt ihr Lust und Zeit, mir hier ein paar nützliche Hinweise zu geben?
    Herzlichen Dank !!
    Gruß,
    estebu
    PHP-Code:
    (function ( $ ) {
      var 
    defaultSettings = {
          
    // Data attributes
          
    headers: [],  // String[] - Array of column headers
          
    tasks: [],    // Task[] - Array of tasks. Required fields: 
                        // id: number, startTime: number, duration: number, column: number

          // Card template - Inner content of task card. 
          // You're able to use ${key} inside template, where key is any property from task.
          
    cardTemplate'<div>${id}</div>',

          
    // OnClick event handler
          
    onClick: function (etask) {},

          
    // Css classes
          
    containerCssClass'skeduler-container',
          
    headerContainerCssClass'skeduler-headers',
          
    schedulerContainerCssClass'skeduler-main',
          
    taskPlaceholderCssClass'skeduler-task-placeholder',
          
    cellCssClass'skeduler-cell',

          
    lineHeight30,      // height of one half-hour line in grid
          
    borderWidth1,      // width of board of grid cell

          
    debugfalse
      
    };
      var 
    settings = {};

      
    /**
       * Convert double value of hours to zero-preposited string with 30 or 00 value of minutes
       */
      
    function toTimeString(value) {
        return (
    value 10 '0' '') + Math.ceil(value) + (Math.ceil(value) > Math.floor(value) ? ':30' ':00');
      }

      
    /**
       * Return height of task card based on duration of the task
       * duration - in hours
       */
      
    function getCardHeight(duration) {
        return (
    settings.lineHeight settings.borderWidth) * (duration 2) - 1;
      }

      
    /**
       * Return top offset of task card based on start time of the task
       * startTime - in hours
       */
      
    function getCardTopPosition(startTime) {
        return (
    settings.lineHeight settings.borderWidth) * (startTime 2);
      }

      
    /**
      * Render card template
      */
      
    function renderInnerCardContent(task) {
        var 
    result settings.cardTemplate;
        for (var 
    key in task) {
          if (
    task.hasOwnProperty(key)) {
            
    // TODO: replace all
            
    result result.replace('${' key '}'task[key]);
          }
        }

        return $(
    result);
      }

      
    /** 
       * Generate task cards
       */
      
    function appendTasks(placeholdertasks) {
        
    tasks.forEach(function(task) {
          var 
    innerContent renderInnerCardContent(task);
          var 
    top getCardTopPosition(task.startTime);
          var 
    height getCardHeight(task.duration);

          var 
    card = $('<div></div>')
            .
    attr({
              
    style'top: ' top 'px; height: ' height 'px',
              
    titletoTimeString(task.startTime) + ' - ' toTimeString(task.startTime task.duration)
            });
            
    card.on('click', function (e) { settings.onClick && settings.onClick(etask) });
            
    card.append(innerContent)
            .
    appendTo(placeholder);
        }, 
    this);
      }

      
    /**
      * Generate scheduler grid with task cards
      * options:
      * - headers: string[] - array of headers
      * - tasks: Task[] - array of tasks
      * - containerCssClass: string - css class of main container
      * - headerContainerCssClass: string - css class of header container
      * - schedulerContainerCssClass: string - css class of scheduler
      * - lineHeight - height of one half-hour cell in grid
      * - borderWidth - width of border of cell in grid
      */
      
    $.fn.skeduler = function( options ) {
        
    settings = $.extend(defaultSettingsoptions);

        if (
    settings.debug) {
          
    console.time('skeduler');
        }

        var 
    skedulerEl = $(this);

        
    skedulerEl.empty();
        
    skedulerEl.addClass(settings.containerCssClass);

        var 
    div = $('<div></div>');

        
    // Add headers
        
    var headerContainer div.clone().addClass(settings.headerContainerCssClass);
        
    settings.headers.forEach(function(element) {
          
    div.clone().text(element).appendTo(headerContainer);
        }, 
    this);
        
    skedulerEl.append(headerContainer);

        
    // Add schedule
        
    var scheduleEl div.clone().addClass(settings.schedulerContainerCssClass);
        var 
    scheduleTimelineEl div.clone().addClass(settings.schedulerContainerCssClass '-timeline');
        var 
    scheduleBodyEl div.clone().addClass(settings.schedulerContainerCssClass '-body');

        var 
    gridColumnElement div.clone();

        for (var 
    024i++) {
          
    // Populate timeline
          
    div.clone()
            .
    text(toTimeString(i))
            .
    appendTo(scheduleTimelineEl);
          
    div.clone().appendTo(scheduleTimelineEl);

          
    gridColumnElement.append(div.clone().addClass(settings.cellCssClass));
          
    gridColumnElement.append(div.clone().addClass(settings.cellCssClass));
        }

        
    // Populate grid
        
    for (var 0settings.headers.lengthj++) {
          var 
    el gridColumnElement.clone();

          var 
    placeholder div.clone().addClass(settings.taskPlaceholderCssClass);
          
    appendTasks(placeholdersettings.tasks.filter(function (t) { return t.column == }));

          
    el.prepend(placeholder);
          
    el.appendTo(scheduleBodyEl);
        }

        
    scheduleEl.append(scheduleTimelineEl);
        
    scheduleEl.append(scheduleBodyEl);

        
    skedulerEl.append(scheduleEl);

        if (
    settings.debug) {
          
    console.timeEnd('skeduler');
        }

        return 
    skedulerEl;
      };
    }( 
    jQuery )); 
Lädt...
X