We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Table col resizing and col style

Thread ID:

Created:

Updated:

Platform:

Replies:

144727 May 20,2019 08:26 AM UTC May 23,2019 09:39 AM UTC Vue 5
loading
Tags: Schedule
Vadims Talapins
Asked On May 20, 2019 08:26 AM UTC

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.



Nevitha Ravi [Syncfusion]
Replied On 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 


Vadims Talapins
Replied On 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

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Vadims Talapins
Replied On 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

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon