1. Home
  2. Forum
  3. Vue
  4. Table col resizing and col style

Table col resizing and col style

I have a problem. I want to display the monthly calendar so that it fits without scrolling.
With the help of css, I corrected the size of the column. But at the same time, all elements begin to shift by the end of the month.
But as soon as horizontal scrolling appears, the shifting disappears.

How can I position the element in the center and leave it at the edges along a single 1 pixel, inside the cell? Also, to get everything stuck without scrolling? As in the example in the photo.

What method you can quickly paint over the day using the calendar of holidays. I need only a method. I use an example from documentation that a delay appears in the form of 3 seconds. I need to paint over the creation of cells.



5 Replies
NR Nevitha Ravi Syncfusion Team May 21, 2019 06:18 AM UTC

Hi Vadims, 

Greetings from Syncfusion Support. 

To paint over the cells for holidays, you can make use of renderCell event and for the same we have prepared a sample which can be downloaded from the following link. 

onRenderCell:function(args){ 
    if (args.elementType == 'workCells' || args.elementType == "monthCells") { 
      let date = new Date(args.date.getFullYear(), args.date.getMonth(), args.date.getDate()); 
      if ((date.getTime() - new Date(2019, 0, 1).getTime()) == 0) { 
        addClass([args.element], 'paint'); 
      } 
    } 
 } 

td.e-work-cells.e-work-hours.paint,td.e-work-cells.e-alternate-cells.paint,td.e-work-cells.paint { 
    background: #26bb9a30 !important; 
    pointer-events:none; 
} 


The image shared is not available, can you reattach the image? We suspect that your requirement is ‘not want to show horizontal scroll bar’. Can you confirm your view whether you are using timeline month view or vertical month view so that we could provide you the better solution? 

Regards, 
Nevitha 


VT Vadims Talapins May 21, 2019 09:30 AM UTC

I added a picture with an example, I use "TIMELINE MONTH". Example for my second question works (holidays), Thank you!

Attachment: scheduletask1_edf34a8e.zip

KK Karthigeyan Krishnamurthi Syncfusion Team May 22, 2019 11:41 AM UTC

Hi Vadims, 
 
Thanks for the update. 
 
Please use the below code example to achieve your requirement. 
 
.e-schedule .e-timeline-month-view .e-work-cells, 
.e-schedule .e-timeline-month-view .e-date-header-wrap table col, 
.e-schedule .e-timeline-month-view .e-content-wrap table col { 
  width: auto; 
} 
.e-schedule .e-timeline-month-view .e-content-wrap { 
  overflow: inherit; 
  overflow-x: inherit; 
  overflow-y: auto; 
} 
 
 
Regards, 
Karthi 


VT Vadims Talapins May 22, 2019 02:29 PM UTC

Looked at an example in it, everything works fine. I put css from example, the events started to go in the opposite direction.

Attachment: working_time_bug_b5df434.zip

KK Karthigeyan Krishnamurthi Syncfusion Team May 23, 2019 09:39 AM UTC

Hi Vadims,  
 
Thanks for the update. 
 
We have checked our previous sample with event template option and everything is fine. We suspect that your sample side customization could be the cause for the issue.  
 
Kindly try to reproduce the error in our sample and revert else share your code example/runnable sample (if possible) to serve you better. 
 
Regards, 
Karthi 


Loader.
Up arrow icon