Taking Consultation Appointments For The Week Of… How to?

Hi guys,

So I’m guessing this is probably a javascript thing, but not certain if that is required or not.

I want to be able to display on a page text that tells visitors Appointments are being made for next week. I want it to look like this:

“Accepting Bookings For the Week of Feb 23rd to Feb 30th”

Or something like that.

But I want the “Feb 23rd to Feb 30th” to automatically increment as time goes on to whatever the date range (Sun-Sat) is for the following week.

Does anyone have any idea how to do this?

  • Devi
    • Design Lord, Child of Thor

    Yeah ok I think that is very much like what I was looking for.

    I got the example code you provided from the stackflow discussion to print out just fine in a WordPress post. Today’s date +7 days.

    Using the plugin “Insert PHP” I added a snippet to my page that looks like this:

    [insert_php]

    print date(‘M d, Y’, strtotime(‘+7 days’:wink: );

    [/insert_php]

    And got this as a result:

    Feb 22, 2014

    Now I could modify this to be “Taking Appointments For the Week of Feb 22, 2014 to Feb 29, 2014” and it would technically work…

    But what I would like is to not have it quite so dynamic. I would like it to only list date ranges for an exact week.

    Hrm.. Trying to describe it a bit better.

    Ok So Feb 22nd is actually a Saturday, which is the end of a week.

    So ideally what I would have is “Taking Appointments for the Week of Feb 16th, 2014 to Feb 22nd, 2014”.

    Then rather than have it change every day, I would like the next time it changes to change to refer to the next week. I.e.

    “Taking Appointments for the week of Feb 16th, 2014 to Feb 22nd, 2014”

    Would next become:

    “Taking Appointments for the week of Feb 23rd, 2014 to March 1st 2014”

    Because that would be the next week.

    Any idea how I could do this?

  • Ash
    • WordPress Hacker

    Hi there

    Sorry for being late here.

    Please try the following code:

    <script type="text/javascript">

    jQuery(function($) {
    function getMonday(d) {
    d = new Date(d);

    var month = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');

    var day = d.getDay(),
    startDate = (d.getDate() + 7 ) - day + (day == 0 ? -6:1), // adjust when day is sunday
    endDate = startDate + 7;

    var correctStartDate = new Date(d.setDate(startDate)),
    correctEndDate = new Date(d.setDate(endDate));

    $('.ds').text(month[correctStartDate.getMonth()] + " " + correctStartDate.getDate());
    $('.dl').text(month[correctEndDate.getMonth()] + " " + correctEndDate.getDate());
    }

    getMonday(new Date());
    });

    </script>
    <style>
    .ds, .dl{
    font-weight: bold
    }
    </style>
    <span class="dp">Accepting Bookings For the Week of <span class="ds">Feb 23rd</span> to <span class="dl">Feb 23rd</span></span>

    There are three parts, you can see. I am not sure how your theme is developed. First you can try enter whole codes from wordpress editor in text mode. If it runs, you’re lucky :slight_smile:

    If no, then grab the html part from here, and put in wordpress editor in text mode. And rest of the part should be inserted in footer.php, after wp_footer() function but before </body> tag.

    Let me know if it works for you.

    Cheers

    Ash

  • Ash
    • WordPress Hacker

    A little updated code:

    <script type="text/javascript">

    jQuery(function($) {
    function getMonday(d) {
    d = new Date(d);

    var month = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');

    var day = d.getDay(),
    startDate = (d.getDate() + 7 ) - day + (day == 0 ? -6:1), // adjust when day is sunday
    endDate = startDate + 6;

    var correctStartDate = new Date(d.setDate(startDate)),
    correctEndDate = new Date(d.setDate(endDate));

    $('.ds').text(month[correctStartDate.getMonth()] + " " + correctStartDate.getDate());
    $('.dl').text(month[correctEndDate.getMonth()] + " " + correctEndDate.getDate());
    }

    getMonday(new Date());
    });

    </script>
    <style>
    .ds, .dl{
    font-weight: bold
    }
    </style>
    <span class="dp">Accepting Bookings For the Week of <span class="ds">Feb 23rd</span> to <span class="dl">Feb 23rd</span></span>

    Cheers

    Ash

  • Devi
    • Design Lord, Child of Thor

    Oh man! Beautiful!

    I cleared the default contents of your two spans to prevent rendering of incorrect dates, and it worked just fine still too.

    I did end up deciding that a 5 day work week, Monday to Friday was probably best though.

    To achieve that I modified your code’s:

    endDate = startDate + 6;

    to

    endDate = startDate + 4;

    And it seems to work fine!

    Is that the right modification to make?

    Man thank you so much! That is so beautiful now. I really appreciate it!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.