Our pure JavaScript Scheduler component


Post by janan »

Hi,
In the following example https://www.bryntum.com/examples/scheduler/basic/, change the code as follows to get tooltip.

import { Scheduler } from '../../build/scheduler.module.js?444007';
import shared from '../_shared/shared.module.js?444007';
/* eslint-disable no-unused-vars */
import { Tooltip } from '../../build/scheduler.module.js?444007';
//region Data

var _commonTooltip = function(type, id, selector, url) {
  var obj   = {},
      json  = {},
      tip   = new Tooltip({
        dontStayVisibleWhenChangingTargets: true,
        id:                   id,
        hideOnDelegateChange: 700,
        forSelector:          selector,
        showOnHover:          false,
        anchorToTarget:       false,
        hideDelay:            100,  // The time (in milliseconds) for which the Tooltip remains visible when the mouse leaves the target
        listeners: {
          beforeClose: function() {
            tip.html = '';
          },
          beforeShow: function() {
            tip.html = 'ajja';
            if (tip.activeTarget.parentNode.classList.contains('b-group-row') || tip.activeTarget.parentNode.classList.contains('b-group-footer')) {
              return false;
            }
          },
        },
      });
};
_commonTooltip('column', 'columnTooltipId', '.ownClass');

let resources = [
        { id : 'r1', name : 'Mike' },
        { id : 'r2', name : 'Linda' },
        { id : 'r3', name : 'Don' },
        { id : 'r4', name : 'Karen' },
        { id : 'r5', name : 'Doug' },
        { id : 'r6', name : 'Peter' },
        { id : 'r7', name : 'Sam' },
        { id : 'r8', name : 'Melissa' },
        { id : 'r9', name : 'John' },
        { id : 'r10', name : 'Ellen' }
    ],
    events = [
        {
            id         : 1,
            resourceId : 'r1',
            startDate  : new Date(2017, 0, 1, 10),
            endDate    : new Date(2017, 0, 1, 12),
            name       : 'Click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 2,
            resourceId : 'r2',
            startDate  : new Date(2017, 0, 1, 12),
            endDate    : new Date(2017, 0, 1, 13, 30),
            name       : 'Drag me',
            iconCls    : 'b-fa b-fa-arrows-alt'
        },
        {
            id         : 3,
            resourceId : 'r3',
            startDate  : new Date(2017, 0, 1, 14),
            endDate    : new Date(2017, 0, 1, 16),
            name       : 'Double click me',
            eventColor : 'purple',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 4,
            resourceId : 'r4',
            startDate  : new Date(2017, 0, 1, 8),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Right click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 5,
            resourceId : 'r5',
            startDate  : new Date(2017, 0, 1, 15),
            endDate    : new Date(2017, 0, 1, 17),
            name       : 'Resize me',
            iconCls    : 'b-fa b-fa-arrows-alt-h'
        },
        {
            id         : 6,
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 16),
            endDate    : new Date(2017, 0, 1, 19),
            name       : 'Important meeting',
            iconCls    : 'b-fa b-fa-exclamation-triangle',
            eventColor : 'red'
        },
        {
            id         : 7,
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 6),
            endDate    : new Date(2017, 0, 1, 8),
            name       : 'Sports event',
            iconCls    : 'b-fa b-fa-basketball-ball'
        },
        {
            id         : 8,
            resourceId : 'r7',
            startDate  : new Date(2017, 0, 1, 9),
            endDate    : new Date(2017, 0, 1, 11, 30),
            name       : 'Dad\'s birthday!',
            iconCls    : 'b-fa b-fa-birthday-cake',
            // Custom styling from data
            style      : 'background-color : teal; font-size: 18px',
            // Prevent default styling
            eventStyle : 'none'
        }
    ];

//endregion
var _columnRenderer = function(data) {
 return '<div class="value-container">'+data.value+'</div>';
};
let scheduler = new Scheduler({
    adopt            : 'container',
    minHeight        : '20em',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

columns : [
    { text : 'Name', field : 'name', width : 130, cellCls: 'ownClass',htmlEncode: false, renderer: _columnRenderer }
]
});

Here i render the first column with my own render function.
The tooltip disappears while hovering on child div. Kindly let me know if you need more details.


Post by arcady »

Just use a combined selector '.ownClass, .ownClass *'.


Post Reply