How to remove time dependency of events in week & day views


#1

I want to remove time scale & time dependencies of events & want to plot in list type one below other in week & Day view


#2

Hello @Sravan_Kumar ,

Just to clarify - you want to display all events as “single lines” - like the following screenshot:
http://snippet.dhtmlx.com/5/502fb827b

or I misunderstand you?

If so, you can do it in two ways:

  1. Create your custom event bar, as described in the following guide:
    https://docs.dhtmlx.com/scheduler/custom_events_display.html

  2. You can achieve similar result with a couple of config and additional styling:

// CSS
    html, body {
        margin: 0;
      padding: 0;
    }
    .dhx_cal_event.my_event {
      overflow: hidden;
      height: 50px !important;
    }        
    .my_event_resize {
      display: none;
    }
    .my_event_move {
        position: absolute;
        top: 0;
        height: 10px;
        cursor: pointer;
    }
//JS
scheduler.templates.event_class = function(start, end, event) {
  return "my_event";
};
scheduler.xy.min_event_height = 20;
scheduler.config.cascade_event_display = true;
scheduler.config.cascade_event_margin = 0; 

Here is a demo:
https://snippet.dhtmlx.com/5/bb2c08dfe

If you meant something different, could you please clarify the question with more details, or some screenshots/mockups?


#3

hi @Siarhei want something like below attached image, even if event is 1 hour or full day event or same start time it should be displayed one below other without any time dependency in week view & day view Week-View


#4

@Siarhei can i know above can be doable or not.
@Ales


#5

Hello @Sravan_Kumar,

The provided screenshot looks more like a grid view:
https://docs.dhtmlx.com/scheduler/grid_view.html#relatedguides

Unfortunately, there is no easy way to customize week/day views in such a way. Even if you can change styles of events to make them look like on the screen, they anyway will be rendered based on their start/end dates.

I can’t suggest some workaround on this, but you can order a custom solution from our outsource team by contacting: info@dhtmlx.com