How implement tui-calendar npm package in meteor?


#1

I’m want to use this package because it has all I need for my project and I want to know how to use it in a table tag because when I used the example code The calendar appears behind everything in every page of all of my templates and I want it in a table tag but I don’t know the way to do it.

Here’s an image of where I want to place it:

And here’s the example code:

export const calendar = new Calendar('#calendar', {
    // 'day', 'week', 'month'
    defaultView: 'week',

    // shows the milestone and task in weekly, daily view
    taskView: true,.

    // shows the all day and time grid in weekly, daily view
    scheduleView: true,

    // template options
    template: {
        milestone: function (schedule) {
            return '<span style="color:red;"><i class="fa fa-flag"></i> ' + schedule.title + '</span>';
        },
        milestoneTitle: function () {
            return 'Milestone';
        },
        task: function (schedule) {
            return '&nbsp;&nbsp;#' + schedule.title;
        },
        taskTitle: function () {
            return '<label><input type="checkbox" />Task</label>';
        },
        allday: function (schedule) {
            return schedule.title + ' <i class="fa fa-refresh"></i>';
        },
        alldayTitle: function () {
            return 'All Day';
        },
        time: function (schedule) {
            return schedule.title + ' <i class="fa fa-refresh"></i>' + schedule.start;
        }
    },
    week: {
        daynames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
        startDayOfWeek: 0,
        narrowWeekend: true
    },
    month: {
        daynames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
        startDayOfWeek: 0,
        narrowWeekend: true
    },

    // list of Calendars that can be used to add new schedule
    calendars: [],

    // whether use default creation popup or not
    useCreationPopup: false,

    // whether use default detail popup or not
    useDetailPopup: false

});*/

/*export let calendar = new Calendar(document.getElementById('calendar'), {
    defaultView: 'week',
    taskView: true,
    scheduleView: true,
    template: {
        milestone: function(schedule){
            return '<span style="color:red;"><i class="fa fa-flag"></i>' + schedule.title + '</span>';
        },
        milestoneTitle: function() {
            return 'Milestone';
        },
        task: function(schedule){
            return '&nbsp;&nbsp;#' + schedule.title;
        },
        taskTitle: function(){
            return '<label><input type="checkbox" />Task<label>';
        },
        allday: function(schedule){
            return schedule.title + ' <i class="fa fa-refresh></i>';
        },
        alldayTitle: function() {
            return 'All Day';
        },
        time: function(schedule){
            return schedule.title + '<i class="fa fa-refresh"></i>' + schedule.start;
        }
    },
    month: {
        daynames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes'],
        startDayOfWeek: 0,
        narrowWeekend: true
    },
    week: {
        daynames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes'],
        startDayOfWeek: 0,
        narrowWeekend: true
    }
})

Any type of help is appreciated.


#2

I have no experience with this npm package, but it looks to me more like a HTML/CSS issue. Can you inspect the rendered page in your browser and check on the zIndex of the rendered calendar?