(SOLVED) Change calendar DIV's order based on actual month

haaaa ! interesting ! @matthewpmunger

would there be a way, to automate this incremential code you’re using ?

Let’s say we’re in may and want the months’ div be display like so:

  1. may
  2. june
  3. july
  4. august
  5. september
  6. november
  7. december
  8. april
  9. march
  10. february
  11. january

I’ve tried your incremential technique in my codepen (with negative values for past month) but the order of the div actually remains the same:

Code:

$('#months > div').eq(new Date().getMonth()).show();
$('#months > div').eq(new Date().getMonth()+1).show();
$('#months > div').eq(new Date().getMonth()+2).show();
$('#months > div').eq(new Date().getMonth()+3).show();
$('#months > div').eq(new Date().getMonth()+4).show();
$('#months > div').eq(new Date().getMonth()+5).show();
$('#months > div').eq(new Date().getMonth()+6).show();
$('#months > div').eq(new Date().getMonth()+7).show();
$('#months > div').eq(new Date().getMonth()+8).show();
$('#months > div').eq(new Date().getMonth()+9).show();
$('#months > div').eq(new Date().getMonth()-1).show();
$('#months > div').eq(new Date().getMonth()-2).show();
$('#months > div').eq(new Date().getMonth()-3).show();
$('#months > div').eq(new Date().getMonth()-4).show();

Result:

  1. january
  2. february
  3. march
  4. april
  5. may
  6. june
  7. july
  8. august
  9. september
  10. october
  11. november
  12. december

Not sure, but I did update the clone template to show the day, month, and date.

http://time-based-reveal.webflow.io
https://webflow.com/website/time-based-reveal

new Date().getMonth() returns the current month’s 0-based index:

0 = January
1 = Feburary
2 = March
3 = Apr
4 = May
5 = June 
... etc.

.eq(index) reduces the jQuery selector to the nth element, starting from 0.

$('#months > div').eq(new Date().getMonth()).show(); when we are in May, means display element 4 from the elements$('#months > div').

If you do new Date().getMonth()-4, this will not work when it’s Jan - April, because the result will be a negative number.

I don’t get why you need the elements in this order, it just complicates things:

may
june
july
august
september
november
december
april
march
february
january

@matthewpmunger your date is wrong, almost everything in JavaScript starts from 0, so you need to subtract 1 from date

3 Likes

@samliew Thank you for the explanation. I understand now what’s happening and I’ve fixed/cleaned up the project now. Much better.

When doing the hour, would I be correct to assume that JavaScript will return 0-23?

Yes Date - JavaScript | MDN

@samliew, thank you for the .eq function explanations, it now all makes sense indeed.

The very reason why the months need to appear in that order is not just to challenge myself but because the website I am building is a website where people can reserve theater events.

Very few people are willing to scroll down every month to see what the upcoming event is. This is the reason why, the actual month, containg all upcoming events, needs to appear first in your index structure you built… followed by the next months containing the next events etc…

In that sense, I guess the .eq function might be limited for event management unfortunately. I had been thinking about a solution using else if statements:

for each “n” number the .eq function returns, then show the month’s divs in a predefined order.
It could be something like this:

if n = 4 then display

div may
div june
div july
div august
div september
div november
div december
div april
div march
div february
div january

and then

if n = 5 then display

div june
div july
div august
div september
div november
div december
div may
div april
div march
div february
div january

and so on until we reach n = 11…

What do you think ?
Would that approach make sense ?

Okay @matthewpmunger, @samliew, I think I just might have found a solution !
Not sure though it is very elegant, but it seems to work.

I have used the insertBefore javascript command.
I tried it and it seems to work ! :slight_smile:

Now the idea would be to add 11 “else if” statement for every n = x number of the month to define every case senerio. I’ll keep digging and trying things out. Should someone have a more elegant way to perform the div moving around task, please let me know !

Here is my codepen

Appreciate your help ! :heart_eyes:
Have a nice weekend you all !
Anthony

Javascript:

// function looks what month it is

function seekMonth() {
  var d = new Date();
  var n = d.getMonth();

  // if actual month is may

  if (n = 4) {
    $('#may').insertBefore('#january');
    $('#june').insertBefore('#january');
    $('#july').insertBefore('#january');
    $('#august').insertBefore('#january');
    $('#september').insertBefore('#january');
    $('#october').insertBefore('#january');
    $('#november').insertBefore('#january');
    $('#december').insertBefore('#january');
    $('#april').insertBefore('#january');
    $('#march').insertBefore('#january');
    $('#february').insertBefore('#january');
  } 
}  

$(document).ready(function() {
  // we call the function to run on document ready
  seekMonth();
});

HTML

<div id="january">january</div>
<div id="february">february</div>
<div id="march">march</div>
<div id="april">april</div>
<div id="may">may</div>
<div id="june">june</div>
<div id="july">july</div>
<div id="august">august</div>
<div id="september">september</div>
<div id="october">october</div>
<div id="november">november</div>
<div id="december">december</div>

EDIT:

Or should I maybe use the flex item method like described by w3schools ?

1 Like

Hi guys,

I think I made it !

I integrated the else if statement and had to modify the following conditions (n = 1), (n = 2), etc… by (n == 1), (n == 2), etc… in order for the script to run the next condition if the first one wasn’t fulfilled.

The script now orders automatically the divs based on the actual month, followed by the upcoming months, followed by the past months in an descending order :sunglasses: Thank you @matthewpmunger, @samliew, @StuM for the inspiration and help !

I updated my project for you to clone and play with it if you want.
If you have a way to optimize the code I patiently hard coded, please let me know !

Live site here. “May” should be displayed first :wink:
Codepen here

Have a nice weekend,
Anthony


EDIT:
I inspired myself from this tutorial on w3schools about ordering items in a flexbox with javascript.

2 Likes

Glad we’re able to help you work through it, but I notice that for May the last four months are in reverse order:
April, March, February, January
instead of
January, February, March, April

Should be an easy fix.

// if actual month is may
  else if (n == 4) {
    document.getElementById("january").style.order = "9";
    document.getElementById("february").style.order = "10";
    document.getElementById("march").style.order = "11";
    document.getElementById("april").style.order = "12";
    document.getElementById("may").style.order = "1";
    document.getElementById("june").style.order = "2";
    document.getElementById("july").style.order = "3";
    document.getElementById("august").style.order = "4";
    document.getElementById("september").style.order = "5";
    document.getElementById("october").style.order = "6";
    document.getElementById("november").style.order = "7";
    document.getElementById("december").style.order = "8";
  }
1 Like

hi @matthewpmunger, thank you for having taken a look !
yes I thought the inverse order could be interesting because that way, when we are in december, the ordered list would look relevant this:

  1. december
  2. november
  3. october
  4. september
  5. august
  6. july
  7. june
  8. may
  9. march
  10. april
  11. february
  12. january

so basically, the month would be displayed in order of relevance: january being the least relevant month as it happened 12 month ago. Of course you can setup the order the way you wish, but for my project I thought it could be interesting for the user, to have a look at past months (and therefore events) in retrospect… and in order of relevance meaning descending order :slight_smile:

I guess if the order wasn’t descending, we’d get in december the following order which could look odd :

  1. december
  2. january
  3. february
  4. march
  5. april
  6. may
  7. june
  8. july
  9. august
  10. september
  11. october
  12. november
1 Like

I see. I was assuming that past events/months would be hidden and these were the next year’s months after December.

2 Likes

I had this same issue with trying to filter events by each month and ended up just adding a “Month” dropdown option field to my CMS Event item that lists all of the months. This allowed me to then create 12 Collection List that simply filter according to the value of that option field.

Of course this requires one more cms field to be filled out and isn’t as elegant as your solution, but it gets the job done. I hope Webflow eventually adds more parameters to filter your data by.

Hi @Ryan_Power Ryan,

yea that could work too !
The reason why I decided to use custom code is because I couldn’t use 12 collection list just for months purpose as I have other collection list for other design element on my page.

A friend of mine, rewrote “my” the javascript code in a much efficient way, you can have a look at it on this codepen :wink:

Best

1 Like