1

I have implemented calendar using Ext.ux.touchcalendar https://github.com/SwarmOnline/Ext.ux.TouchCalendar .I want to change some cells color to green and some cells to red and some cells to blue Can anybody tell how to do?

When i trid to add the below css in skin.css

.touch-calendar-view table.day tr :nth-child(3) td:nth-child(5).time-block  { /* Selects third row, then select fifth cell. */
   background-color: green!important;
}

Thanks

user386430
  • 4,837
  • 13
  • 41
  • 45

1 Answers1

0

The calendar cells are divided into multiple table cells in multiple table rows.

You can target a certain element by using nth-child for both the table row and the containing table cell. Below code is a template, it is better to append some classes instead of tr and td so that it does not affect other tables.

tr:nth-child(3) td:nth-child(5) { /* Selects third row, then select fifth cell. */
  background: lightblue;
}

Example output:

enter image description here

m4n0
  • 29,823
  • 27
  • 76
  • 89
  • Post the whole code you are working on as an edit to the question or create a demo of it using CodePen or JSfiddle please. – m4n0 Nov 02 '15 at 06:59
  • I have edited the question .Can u check this line .touch-calendar-view table.day tr :nth-child(3) td:nth-child(5).time-block { /* Selects third row, then select fifth cell. */ background-color: green!important; } – user386430 Nov 02 '15 at 07:09
  • Since you marked my answer as the solution, can I assume it worked now for you? :) – m4n0 Nov 02 '15 at 07:34
  • yes but i haven given like this.touch-calendar-view tbody tr:nth-child(1) td:nth-child(3) – user386430 Nov 02 '15 at 08:43
  • Yes it depends on the classes of the code you are using. This answer was a template. – m4n0 Nov 02 '15 at 08:46