scheduler selected_event template scroll

Hi, i want to scroll that template but i not able.

I have this:

scheduler.templates.selected_event = function (obj, type) {

    var html = "", fts = "", fte = "";
    var start = obj.start_date;
    var end = obj.end_date;

    var fd = webix.i18n.dateFormatStr(start);
    fts = webix.i18n.timeFormatStr(start);
    fte = webix.i18n.timeFormatStr(end);

    var anchura = window.localStorage.getItem("anchura");
    var altura = window.localStorage.getItem("altura") - 100;
    //selected_event " + scheduler.templates.event_class(obj) + "

    html += "<div class='selected_event " + scheduler.templates.event_class(obj) + "' style='width:" + anchura + "px; height:" + altura + "px; overflow:auto;'>";   
    html += "<div class='event_title'>" + mi_man + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_title'>" + fecha + "</div>";
    html += "<div class='event_text'>" + fd + " " + de + " " + fts + " " + a + " " + fte + "</div>";
    html += "<div class='event_text'>" + " " + en + " " + obj.lugar + " " + y_es + " " + obj.tipo_asistencia + "</div>";
    
    html += "<div class='event_title'>" + cartel + "</div>";
    html += "<div style='width:300px; height:200px; text-align:center;'><img src='http://" + obj.image + "' style='width:100%; height:100%;' /></div>";

    if (obj.details && obj.details !== "") {
        html += "<div class='event_title' style='overflow: auto;'>" + detalles + "</div>";
        html += "<div class='event_text'>" + obj.details + "</div>";
    }


    html += "</div>";
    return html;

}

That overflow is not working. Maybe is influence by another div.

can you help me? please!

Thanks and regards!

Hi,

Try to use limit mode for webix.Touch. In this other case, it can block overflow property:

webix.Touch.limit(true);

Hi,

Where do i have to set that code line? I set it in app.js (webix jet) and i tried inside that selected_event template. no luck.

Also, i did an easier template to know if is something of my code…

Is this:

scheduler.templates.selected_event = function (obj, type) {

    webix.Touch.limit(true);

    var html = "";

    html += "<div class='selected_event " + scheduler.templates.event_class(obj) + "' style='width:150px; height:150px; overflow:scroll; float:left;'>";

    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
   
    html += "</div>";

    return html;
}

As i said, i set that code line out of this template.

My scheduler is inside a carousel. Maybe it helps!

On the other hand and is something is driving me crazy…is that this template sometimes apears, sometimes not (apearing the default selected_event template). Why? i do not know.

This template is defined in my app.js, like all my code about my scheduler and it works fine. Except this.

Any help too?

Thanks!

hi again!

easier,

// Plantilla para el evento seleccionado
scheduler.templates.selected_event = function (obj, type) {

    webix.Touch.limit(true);

    var html = "";

    html += "<div style='width:150px; height:50px; overflow:scroll;'>";

    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
   
    html += "</div>";

    return html;
}

regards!

You can place this code before Scheduler init.

webix.Touch.limit(true);
webix.ready(function(){
    ... 
});

i tried that before

this is my app.js

/*
App configuration
*/

define([
“libs/webix-mvc-core/core”
], function (
core
) {

webix.Touch.limit(true);

webix.codebase = "./assets/";

webix.protoUI(
    { name: "eventlayout"
    }, webix.ui.layout, webix.EventSystem);

webix.Date.startOnMonday = true;

webix.Date.Locale = {
    month_fulls: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
    month_short: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    day_full: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
    day_short: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"]
};

webix.i18n.locales["es-ES"] = {   //"es-ES" - the locale name, the same as the file name
    groupDelimiter: " ",         //a mark that divides numbers with many digits into groups
    groupSize: 3,                //the number of digits in a group
    decimalDelimiter: ",",       //the decimal delimiter
    decimalSize: 2,              //the number of digits after the decimal mark

    dateFormat: "%d/%m/%Y",      //applied to columns with 'format:webix.i18n.dateFormatStr'
    timeFormat: "%H:%i",         //applied to columns with 'format:webix.i18n.dateFormatStr'
    longDateFormat: "%d %F %Y",  //applied to columns with 'format:webix.i18n.longDateFormatStr'
    fullDateFormat: "%d.%m.%Y %H:%i", //applied to cols with 'format:webix.i18n.fullDateFormatStr'

    price: "{obj} EUR", //EUR - currency name. Applied to cols with 'format:webix.i18n.priceFormat'
    calendar: {
        monthFull: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto",
            "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        monthShort: ["En", "Feb", "Mar", "Abr", "Mayo", "Jun", "Jul", "Ago", "Sep", "Oct",
            "Nov", "Dic"],
        dayFull: ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"],
        dayShort: ["Dom", "Lun", "Mar", "Mier", "Jue", "Vier", "Sab"]
    }
};

webix.i18n.setLocale(navigator.language);

scheduler.locale.labels = {
    list_tab: "List",
    week_tab: tab_semana,
    day_tab: tab_dia,
    month_tab: tab_mes,
    icon_today: hoy,
    icon_save: "Save",
    icon_done: "Done",
    icon_delete: "Delete event",
    icon_cancel: "Cancel",
    icon_edit: "Edit",
    icon_back: "<div class='icono_atras' style='width:24px; height:24px; float:left; margin-top:6px' />",
    icon_close: "Close form",
    icon_yes: "Yes",
    icon_no: "No",
    confirm_closing: "Your changes will be lost, are your sure ?",
    confirm_deleting: "The event will be deleted permanently, are you sure?",
    label_event: "Event",
    label_start: "Start",
    label_end: "End",
    label_details: detalles,
    label_from: de,
    label_to: a,
    label_allday: todo_el_dia,
    label_time: "Time" 
};


scheduler.config.selected_toolbar = [
    { view: 'label', width: scheduler.xy.icon_back, css: "cancel", name: "back", id: "back", align: "center", label: scheduler.locale.labels.icon_back }
];


scheduler.locale.labels.label_no_events = sin_eventos;

scheduler.config.day_header_date = "%M %d, %Y %h:%i:%s %A";
scheduler.config.init_date = new Date();
scheduler.config.readonly = true;
//scheduler.config.server_utc = true;
scheduler.config.mode = "month";
//scheduler.setLoadMode("month");




// Plantilla para el evento seleccionado
scheduler.templates.selected_event = function (obj, type) {

    

    var html = "";

    html += "<div style='width:150px; height:50px; overflow:scroll;'>";

    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
    html += "<div class='event_text'>" + obj.text + "</div>";
   
    html += "</div>";

    return html;
}



scheduler.config.bottom_toolbar = [   
    { view: "label", id: "today", name: "today", label: scheduler.locale.labels.icon_today, inputWidth: scheduler.xy.icon_today, align: "center", width: scheduler.xy.icon_today + 6 },
    {
        view: "segmented", id: "buttons", value: "month", align: "center", multiview: true,
        options:
        [
            { id: "day", value: scheduler.locale.labels.day_tab, width: scheduler.xy.day_tab },
            { id: "week", value: scheduler.locale.labels.week_tab, width: scheduler.xy.week_tab },
            { id: "month", value: scheduler.locale.labels.month_tab, width: scheduler.xy.month_tab }    
        ]
    }
];





//configuration
var app = core.create({
    id: "vozCiudadana", //change this line!
    name: "vozCiudadana",
    version: "0.1.0",
    debug: true,
    start: "/start"
});

return app;

});

function getIdioma(language) {
switch (language.toLowerCase()) {
case “es-es”: return 1;
}

}

function getMobile() {

if (navigator.userAgent.indexOf("Android") != -1)
    return 1;

if (navigator.userAgent.match(/iPhone|iPad|iPod/i))
    return 2;

if (navigator.userAgent.match(/IEMobile/i))
    return 3;

}

function getIsMobile() {

var altura = parseInt(window.localStorage.getItem("altura"));
var anchura = parseInt(window.localStorage.getItem("anchura"));

var portrait = true;

if (anchura > altura)
    portrait = false;

// ipad 2 (9,7'') : 1024x768
// 10.1'' tablet: 1280X727

if (portrait)
    if (altura > 1000) {
        return 0;
    }
    else {
        return 1;
    }
else {
    if (anchura > 700)
        return 0;
    else
        return 1;
}

}

Everything works fine except that template.

It is shown sometimes and when showed, without scrolling.

Thanks and regards!

Hi,

Sorry, I was not correct. webix.Touch.limit(true); should be added after scheduler init. If you are using Webix Jet, put this call into $oninit section:

$oninit: function{
    webix.Touch.limit(true);
}

There is also another approach - to enable webix touch scroll for all eventTemplate contents (this snippet also should be put into $oninit):

$$("scheduler").$$("eventTemplate").define("scroll",true);
var node = $$("scheduler").$$("eventTemplate").$view.firstChild;		
webix.html.addCss(node, "webix_scroll_cont",true);

Thanks. I will test it

An what about the other subject. Sometimes that customized template is shown, sometimes the default templatetemplate. Why? There is no js error or any output.

Thanks and regards!

scheduler.templates.selected_event should be set before webix.ready handler definition. And in case of Webix Jet there is no possibility to do this. So, try to redefine template via “define” method ($oninit method):

$$("scheduler").$$("eventTemplate").define("template", function(obj){
    var html = "..."; 
    return html;
});

Thank you very much!