Strip out un needed times slots from monthly calendar

Is there any way to not have the monthly schedule render time slots that are not available?

I want to remove this from the code but am not sure how? I wish it not render at all.

<div class="app_timetable_cell notpossible app_past" title="September 18, 2014 9:15 pm">

It slows down my site so much attempting to render times that are not available (break times or off work hours) that the site crashes. It renders every 15 min schedule I have and when I get a good amount of users the site crashes.

  • Tyler Postle

    Hey Latin625,

    Hope you're doing well today and thanks for your question!

    Rendering 1 additional time slot shouldn't be slowing down your site. It sounds like there could be something else going on OR you may need to upgrade your hosting package.

    With that said, have you tried the "Durations" add-on yet?

    It allows you to change the way the durations are calculated and depending on your setup will get rid of some open spaces.

    Alternatively, you can add in some CSS like this:

    div.notpossible, div.busy {
    display: none;
    }

    That way those elements won't actually get rendered on the page :slight_smile:

    You can add that CSS to your own custom stylesheet or child theme. If you don't have either, then use this plugin: https://wordpress.org/plugins/simple-custom-css/ (it is a very light plugin)

    How does that sound? Let us know if you need any further assistance here latin!

    All the best,
    Tyler

  • latin625

    Thanks for the response. I doubt that it is my hosting. I am running a 4 core processor on a dedicated business level amazon server.

    I already have implemented many of the css tricks to hide elements, but that still does not resolve the rendering of unnecessary line of output. It still writes out the line of output whether it is visible or not to the user.

    Can you tell me where I can modify the code to remove all of this unneeded output?

    The reason I can only render one is because of the monthly display. It wants to render every time slot whether it is available, busy or full. If you look at your source code even on your demo, it renders it hidden, thus slowing down the time the page loads in the browser.

    If I just use the css... The code is still rendered on the page... but not visible to the user. I want to eliminate it all together.

    Thanks again.

  • Michelle Shull

    Hello, Lord Vader! I mean latin625.

    I'll add a flag for second level support, they'll be able to tell you the safest way to alter this code. Remember to make a thorough changelog, since any changes you make will need to be added again when the plugin updates next.

    I am, like Tyler, skeptical that this is solely the fault of rendering unavailable times. I'm running appointments on a test site loaded down with plugins, and I've never noticed any lag at all on any of the Appointments features. Would you mind sharing the troubleshooting steps you've already taken to determine this is the cause?

    Thanks!

  • latin625

    Hi, Yes, I view the code on the page after it loads in a monthly template and see a ton of additional code that I have marked with display:none to hide still being rendered.

    here are a few lines:

    <input type="hidden" class="appointments_select_time" value="1409529600" /></td>
    <td class="notpossible app_past" title="September 2, 2014"><p>2</p>
    <input type="hidden" class="appointments_select_time" value="1409616000" /></td><td class="notpossible app_past" title="September 3, 2014"><p>3</p>
    <input type="hidden" class="appointments_select_time" value="1409702400" /></td><td class="notpossible app_past" title="September 4, 2014"><p>4</p>
    <input type="hidden" class="appointments_select_time" value="1409788800" /></td><td class="notpossible app_past" title="September 5, 2014"><p>5</p>
    <input type="hidden" class="appointments_select_time" value="1409875200" /></td><td class="notpossible app_past" title="September 6, 2014"><p>6</p>
    <input type="hidden" class="appointments_select_time" value="1409961600" /></td></tr><tr><td class="notpossible app_past" title="September 7, 2014"><p>7</p>
    <input type="hidden" class="appointments_select_time" value="1410048000" /></td><td class="notpossible app_past" title="September 8, 2014"><p>8</p>
    <input type="hidden" class="appointments_select_time" value="1410134400" /></td><td class="notpossible app_past" title="September 9, 2014"><p>9</p>
    <input type="hidden" class="appointments_select_time" value="1410220800" /></td><td class="notpossible app_past" title="September 10, 2014"><p>10</p>
    <input type="hidden" class="appointments_select_time" value="1410307200" /></td><td class="notpossible app_past" title="September 11, 2014"><p>11</p>
    <input type="hidden" class="appointments_select_time" value="1410393600" /></td><td class="notpossible app_past" title="September 12, 2014"><p>12</p>
    <input type="hidden" class="appointments_select_time" value="1410480000" /></td><td class="notpossible app_past" title="September 13, 2014"><p>13</p>
    <input type="hidden" class="appointments_select_time" value="1410566400" /></td></tr><tr><td class="notpossible app_past" title="September 14, 2014"><p>14</p>
    <input type="hidden" class="appointments_select_time" value="1410652800" /></td><td class="notpossible app_past" title="September 15, 2014"><p>15</p>
    <input type="hidden" class="appointments_select_time" value="1410739200" /></td><td class="notpossible app_past" title="September 16, 2014"><p>16</p>
    <input type="hidden" class="appointments_select_time" value="1410825600" /></td><td class="notpossible app_past" title="September 17, 2014"><p>17</p>
    <input type="hidden" class="appointments_select_time" value="1410912000" /></td><td class="notpossible app_past" title="September 18, 2014"><p>18</p>
    <input type="hidden" class="appointments_select_time" value="1410998400" /></td><td class="notpossible app_past" title="September 19, 2014"><p>19</p>
    <input type="hidden" class="appointments_select_time" value="1411084800" /></td><td class="busy today" title="September 20, 2014"><p>20</p>
    <input type="hidden" class="appointments_select_time" value="1411171200" /></td></tr><tr><td class="notpossible app_holiday" title="September 21, 2014"><p>21</p>
    <input type="hidden" class="appointments_select_time" value="1411257600" /></td><td class="notpossible app_holiday" title="September 22, 2014"><p>22</p>
    <input type="hidden" class="appointments_select_time" value="1411344000" /></td><td class="notpossible app_holiday" title="September 23, 2014"><p>23</p>
    <input type="hidden" class="appointments_select_time" value="1411430400" /></td><td class="notpossible app_holiday" title="September 24, 2014"><p>24</p>
    <input type="hidden" class="appointments_select_time" value="1411516800" /></td><td class="notpossible app_holiday" title="September 25, 2014"><p>25</p>
    <input type="hidden" class="appointments_select_time" value="1411603200" /></td><td class="notpossible app_holiday" title="September 26, 2014"><p>26</p>
    <input type="hidden" class="appointments_select_time" value="1411689600" /></td><td class="notpossible app_holiday" title="September 27, 2014"><p>27</p>
    <input type="hidden" class="appointments_select_time" value="1411776000" /></td></tr><tr><td class="notpossible app_holiday" title="September 28, 2014"><p>28</p>
    <input type="hidden" class="appointments_select_time" value="1411862400" /></td><td class="notpossible app_holiday" title="September 29, 2014"><p>29</p>
    <input type="hidden" class="appointments_select_time" value="1411948800" /></td><td class="notpossible app_holiday" title="September 30, 2014"><p>30</p>

    I want to only show and render the lines of code for busy or available times. The not possible lines of code kill my load times when I attempt to have more that one day at a time available for users.

    I understand that this css trick just hides the elements, but the page still renders it none the less.

    I also have been doing some testing on pages peed and get this as a result:

    Your page has 4 blocking CSS resources. This causes a delay in rendering your page.

    That may be a whole different issue, but the one about the "<td class="notpossible app_past" " are driving me nuts trying to remove.

    May the force be with you, kind jedi! =)

  • Michelle Shull

    The force is strong with this issue, for sure.

    I get what you're wanting to achieve here, and I know second level will have more answers than Yoda. (Stopping now, before I run the joke right into the ground.)

    I tried a few hacks of my own, but they're hacks, I don't trust them enough to pass on, but it did prove that it's completely possible to avoid rendering these blocks.

    Thanks for your patience!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.