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

Hi there :slight_smile:

I am builiding a website for my town theater. Did some really cool progress so far with CMS collection and everything until I realised I could not nest a Collection List inside another Collection list.

Si I was wondering, if with some jQuery code, we could reagange the order of a bunch of divinside an html page ?

I would love to find a way, to rearrange the order of my div so that the first div displayed, is the div in relation to the month we are living in :slight_smile: When a month passes by, the first div goes at the very bottom and the second div comes at the very top and so on.

I made a small screenshot of my idea and what I would like to achieve.
Maybe you guys did something similar in the past or know where I should look / ask ?

If we could have nested a collection list within another one, I could have set up a number for every month and manually change that number at the end of every months so that the collection list reorders its item as mentioned before… but nesting collection list inside another one is not even in “developement” in the wishlist unfortunately.

Thank you very much as always, :hugs:
Anthony

1 Like

You could just do two separate lists.

The first would be only the current month, and the second would be only past months, and you sort them each however you like.

2 Likes

You could even reference other collections within that same collection.

Try using the Reference or Multi-reference fields.

@QA_Brandon, thank you I thought about multireferencing my events in my Month’s collection. The problem is, it is not possible to multi-reference fields if you are not on the Collection List’s template page. The only thing you can reference when having the collection list not on the template page, is the regular reference field which is not enough for me as I have many events for the same month.

@Cricitem, yea that’s actually a good idea ! I did try actually but it is the same problem… I can order the months more or less correctely with your technique, but then again, I need to implement my events within those months items that I just sorted… and it is not possible to nest a collection within another one at the moment. :confused:

Here is my read-only link

@sabanna, maybe you know of a better CMS structure than the one I came up with so far ? :slight_smile:



Hi, @anthonysalamin!

Let me know if I understand correctly what is the End result that you are trying to archive.

You want to show the user the calendar that contains all the events and that calendar looks differently depends on the current date/month?

Cheers,
Anna

Hi, @sabanna !

Thank you for stepping in ! For you guys to better assess what the end result is, I made little picture to describe my actual setup, and the end result I’m aming for :slight_smile:

Some context first:

A theater season starts in september 2017 and ends up in june 2018.
Right now, as we are in april, the user on the website needs to scroll dooooooown until the month of april 2018 to see what the next available events are. This is not really UX friendly.

Ideas I’ve explored but failed at:

  1. I thought I could put a number field for each month of the Collection List, then manually change that number every months so that the order of the events stays relevant to the user (I would ask the Collection List to order the items from depending on those field numbers). This is not really sustainable method on the long term, and the main problem is, I could not nest my Events Collection List inside my Months Collection List.

  2. I thought about using code to programmaticaly change month’s div position within the DOM according to the actual month we are living… My idea stopped at the stage of idea… as I’m only a designer :slight_smile:

My simplified picture for you to better understand the expected end result
Actual work in progress page to be found here
Atual read-only link here

EDIT:

To answer your question, yes I would like to show the user the calendar that contains all the events and that calendar would look different depending on the current month :slight_smile:


Hello :slight_smile:

I have quickely made a very simpified calendar project with my current setup.
Read-only link to be found here.

To sum up:

The end result would be to have the div of the month we are living in, show up first, followed by the upcoming month, etc… In my case, the div september 2017 should be at the very bottom of the list for example.

Hi Anthony,

Did you ever get your calendar issue worked out? Just wondering?

Let me know if you still need help?

Brandon

Hi there @QA_Brandon,

unfortunately I did not get my calendar issue worked out.
I could still appreciate help here :slight_smile:
The thing is, I think I won’t have it work without tiny bit of custom code as automatic month recognition isn’t native to webflow I believe.

Thank you for getting back at me regarding that topic tough !
Anthony

Also…paging @matthewpmunger

Could something like this be a solution for @anthonysalamin ?

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

1 Like

Wow ! How cool is that !
Thank you @StuM for diggin’this out ! :hugs:

It looks super interesting ! I cloned the project and messed around with the code a bit !
The script now displays the div according to the actual month we are living ! Amazing !

Also, I made some research on w3schools and fount this nice .getMonth example.
I searched the .eq function to on Jquery but did not understand exactely what this function does, I can’t put words to translate what it does into english.

Now I guess I need to find an “algorithm” to ask the script to display also the month june and july after the div may and then the rest of the previous months like so:

  1. May (displayed by the script based on the actual month we’re living)
  2. june
  3. July
  4. March
  5. April
  6. February
  7. January

Here is the live site
Here is the read only link

EDIT:

<script>
function myFunction() {
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

    var d = new Date();
    var n = month[d.getMonth()];
    document.getElementById("demo").innerHTML = n;
}
</script>
2 Likes

Hey guys,

I am the one who create the time-based-reveal project to share with others what I learned, however @samliew is the actual genius behind getting the code to work. Maybe it’s possible to duplicate the script line two more times and do something like .getMonth+1 and .getMonth+2. Not sure if that’s possible but if a spreadsheet can do that calculation I would think javascript could too. Again, I’m no the code expert but I can understand the logic of the code if I see it.

@anthonysalamin I foresee a possible issue when displaying Nov or Dec because the upcoming months will be Jan and Feb which will be above Nov and Dec in the html structure. Maybe there’s a way to use flexbox in combination with the script to not only reveal the 3 months but also arrange the order using flexbox’s custom order functionality.

[EDIT]
I just thought of a way to do this without using code to manipulate the flex-child order. Basically have two separate divs with the following order.
1. Jan → Dec
2. Nov → Feb
If the .getMonth command returns the value of Jan→Oct then display div1.
If the .getMonth command returns the value of Nov or Dec then display div2.
[/EDIT]

The date filtering for CMS Collections could use some updating. Just this addition would be leaps and bounds towards easily creating custom event calendars.

For instance filtering collection items:
Item Date = Current Month/Year

2 Likes

Anthony, Im working on a project today and rest of the week, if you will allow me I will take a look over the weekend. It may not be as complicated as that.

1 Like

Hey thank you everybody for helping me out with ideas !! really appreciate :slight_smile:

The reason why I think it might be though not to do it without custom code is because in my special project, the months I need to sort aren’t in the same year !

Let me explain :slight_smile: I’m working for the Theater of my town. Their programm starts on September and ends up in June of the next year, like so:

    1. september 2017
    1. october 2017
    1. november 2017
    1. december 2017
      –
    1. january 2018
    1. february 2018
    1. march 2018
    1. april 2018
    1. may 2018
    1. june 2018

I have made a little video recording of my actual layout which is kind of okay because I built a “nav system” that allows people to browse events per month when they click on that month button.

The theater however asked me to also display in a list ALL months containing every events of the season (so from september 2017 to june 2018) AND asked me to have the events of the month we’re living to be displayed first, which of course make sense.

Right now, the user coming on my site needs to scroll all the way down to may 2018 to see the upcoming events. At the end of my video recording, there is the old ugly website that my theater has but they do have this sorting system in place where the actual month is displayed first. I tried to reverse engineer what they did but I’m not clever enough obviously … :slight_smile:

Anyway, maybe the video might sparkle some ideas !
And yeah @matthewpmunger, the date filtering for CMS Collection could be improved for more advance sorting layouts :):sunglasses:

@QA_Brandon, please if you have some ideas let me know !

PS: I made the date recognition project clonable if you want to have a look at the modified layout with my theater months :slight_smile:

The cloned project is displaying Jan 2018 for me.

Hi @mattewpmunger,

yea i got that div being displayed too, do not understand why.
I’ve researching a bit on stackoverflow and found some interesting stuf.
Obviously I’m no coder but I wrote what could “potentially” work… but doesnt :slight_smile:
Anyway maybe that codpen could inspire some javscript ninjas ?

That could be the code looking for what month it is (january = 0)

// function that looks what month it is
function myFunction() {
  var d = new Date();
  var n = d.getMonth();

  if (n = 0) {$("#january").show();}
  if (n = 1) {$("#february").show();}
  if (n = 2) {$("#march").show();}
  if (n = 3) {$("#april").show();}
  if (n = 4) {$("#may").show();}
  if (n = 5) {$("#june").show();}
  if (n = 6) {$("#july").show();}
  if (n = 7) {$("#august").show();}
  if (n = 8) {$("#september").show();}
  if (n = 9) {$("#october").show();}
  if (n = 10) {$("#november").show();}
  if (n = 11) {$("#december").show();}
}

$(document).ready(function() {
  // we call the function on document ready
  myFunction();
});

An this could be the 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>

An this the CSS to initially hide the div

div {
  display:none;
}

What do you think ?

Okay, I just re-wrote the script to make better use of the else if statement I just learnt :slight_smile:
It seems I’m now getting somewhere as one div is being shown.
Unfortunately it is the wrong div (february) where may should be actually being shown.

See the codepen link

The code:

// we define the function that looks what month it is
function showMonth() {
  var d = new Date();
  var n = d.getMonth();

  // depending on n value, reveal the acording div
  if (n = 0) {
    $("#january").show();
  } else if (n = 1) {
    $("#february").show();
  } else if (n = 2) {
    $("#march").show();
  } else if (n = 3) {
    $("#april").show();
  } else if (n = 4) {
    $("#may").show();
  } else if (n = 5) {
    $("#june").show();
  } else if (n = 6) {
    $("#july").show();
  } else if (n = 7) {
    $("#august").show();
  } else if (n = 8) {
    $("#september").show();
  } else if (n = 9) {
    $("#november").show();
  } else if (n = 10) {
    $("#december").show();
  }
}

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

https://codepen.io/samliew/pen/deQGog

$('#months > div').eq(new Date().getMonth()).show();

2 Likes

Well…

that’s what I would call a highly effective tiny line of code !
Thank you @samliew :sunglasses:

EDIT:
Though I’m not sure I can change div’s order without the div having an id.
I wonder what was wrong in my else if statement ?

… now I just need to find a way to display the other div in the right order like so:

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

:sweat_smile:

Try this.
$('#months > div').eq(new Date().getMonth()).show();
$('#months > div').eq(new Date().getMonth()+1).show();
$('#months > div').eq(new Date().getMonth()+2).show();

1 Like