{"id":1222408,"date":"2017-01-23T09:09:37","date_gmt":"2017-01-23T17:09:37","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/"},"modified":"2017-01-23T19:13:26","modified_gmt":"2017-01-24T03:13:26","slug":"mobile-events-calendar","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/","title":{"rendered":"Mobile Events Calendar"},"content":{"rendered":"<p>We are looking for some assistance with styling the events calendar grid on mobile phone.<\/p>\n<p>Currently if you view the calendar grid on mobile phone there is no way to know if a date has an event on it or not. You have to click on every date left in the month in order to determine if there is or is not an event.<\/p>\n<p>As you can see in my attached screen shot the calendar shows 23 &#8211; 31st for the rest of january, but unless you actually clicked on the 24th or 25th, you wouldn&#8217;t actually know that an event was scheduled. The same goes for 26-31st. There aren&#8217;t any scheduled so we&#8217;d like  the user to more easily know when there are and when there are not events.<\/p>\n<p>I tried adding the following CSS but it doesn&#8217;t seem to work<\/p>\n<pre><code>.tribe-events-future.tribe-events-has-events.mobile-trigger {\r\n      background-color: #92cee8 !important;\r\n    }\r\n    .tribe-events-calendar td.tribe-events-present.mobile-active.tribe-events-future div[id*=tribe-events-daynum-] {\r\n      background-color: #92cee8 !important;\r\n    }<\/code><\/pre>\n<p>The issue is that the first class works to change the background of each future date which has an event<\/p>\n<pre><code>.tribe-events-future.tribe-events-has-events.mobile-trigger {\r\n      background-color: #92cee8 !important;\r\n    }<\/code><\/pre>\n<p>However the problem then becomes when you actually click on a future date which has an event, the numbers are on the wrong background color. They retain the default color set by:<\/p>\n<p><code>.tribe-events-calendar .mobile-active div[id*=tribe-events-daynum-]<\/code><\/p>\n<p>I tried specifying a more specific class of:<\/p>\n<pre><code> .tribe-events-calendar td.tribe-events-present.mobile-active.tribe-events-future div[id*=tribe-events-daynum-] {\r\n      background-color: #92cee8 !important;\r\n    }<\/code><\/pre>\n<p>however that didn&#8217;t work.<\/p>\n<p>I just need to make it abundantly clear to the visitor that a date does or does not have an event taking place.. I appreciate your assistance. <\/p>\n","protected":false},"template":"","class_list":["post-1222408","topic","type-topic","status-closed","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mobile Events Calendar -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile Events Calendar -\" \/>\n<meta property=\"og:description\" content=\"We are looking for some assistance with styling the events calendar grid on mobile phone. Currently if you view the calendar grid on mobile phone there is no way to know if a date has an event on it or not. You have to click on every date left in the month in order to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-24T03:13:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/\",\"name\":\"Mobile Events Calendar -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2017-01-23T17:09:37+00:00\",\"dateModified\":\"2017-01-24T03:13:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Events Calendar PRO\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Mobile Events Calendar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile Events Calendar -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/","og_locale":"en_US","og_type":"article","og_title":"Mobile Events Calendar -","og_description":"We are looking for some assistance with styling the events calendar grid on mobile phone. Currently if you view the calendar grid on mobile phone there is no way to know if a date has an event on it or not. You have to click on every date left in the month in order to [&hellip;]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/","article_modified_time":"2017-01-24T03:13:26+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/","name":"Mobile Events Calendar -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2017-01-23T17:09:37+00:00","dateModified":"2017-01-24T03:13:26+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/mobile-events-calendar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Events Calendar PRO","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/"},{"@type":"ListItem","position":5,"name":"Mobile Events Calendar"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1222408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1222408\/revisions"}],"predecessor-version":[{"id":1222711,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1222408\/revisions\/1222711"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1222408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}