CODEWITHSUNDEEP
javascriptcsssencha-touchsencha-architectsencha-touch-2.1
user386430
user386430

Reputation: 4967

How to change particular cells color using css in Ext.ux.touchcalendar in sencha touch

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

Upvotes: 1

Views: 104

Answers (1)

m4n0
m4n0

Reputation: 32275

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

Upvotes: 0

Related Questions