2

I have an overview of some partyevents (some on the same day). I need to sort them on the current date and time. When an event is done it needs to go into the list of old events.

How I think this could be done is some class is being added with javascript when an event is in the past or future based on the current time. It needs to know the date and time of the event by the title or other attribute. (This way I can use display:none when the past class is added for the list of upcomming events and on the old events add display:block.)

Upcomming party events: - list here

Old events: - list here

I have searched allot but I can't find any usefull scripts. Maybe someone can help me out?

Marc
  • 248
  • 2
  • 4
  • 15

3 Answers3

3

You should definitly look into knockout.js @ http://knockoutjs.com/examples/betterList.html

Once you know how it works, you will simple LOVE it.

Edit:

A little more information: you will work with observableArrays which will trigger knockout to change the HTML for you as soon as you modify (like sort for example) - which is amazing right?

Edit2:

Stack overflow has a lot of support for knockout as well, so questions will most likely get answered!

So knockout works with a viewmodel which is bound to the view. Inside this viewmodel you would have a partyList (called parties in my example) which is an observableArray. The viewmodel could be formatted as such:

var viewmodel = function(){
    self = this;        
    self.parties = ko.observableArray([{ name: "Halloween", date: "2014/10/31" },{ name: "Christmas", date: "2014/12/25" }]);
    self.sortParties = function(){
        self.sortParties().sort(function(a, b){
            //here comes the sorting logic you want to apply
        }
    });
};

ko.applyBindings(new viewmodel());

The HTML could be something like this:

<div data-bind="foreach: parties">
    <div data-bind="text: name" />
    <div data-bind="text: date" />
</div>
<button data-bind="click: sort">Sort</button>

This HTML would first render the two inner divs for every event in the parties array (so in this case 2) and display the name and the date.

If a user clicks the button, then the sort method would be called. The nice thing about knockout is that whatever order the objects in your array are in, will be exactly represented in your HTML without you having to do anything else then clicking the button. The code I provided is everything you need (including the knockout scripts of course) to get this to work.

You want to add a new party? No problem, add an add method to the viewmodel which would add a party to the parties and it will appear in the HTML.

sander
  • 719
  • 2
  • 9
  • 21
  • Good luck! Don't forget do download the scripts needed at http://knockoutjs.com/ and include them in your page! Also, the documentation on there is really good, so I suggest reading the basics if you get stuck – sander Oct 31 '14 at 14:10
1

I think you should use PHP for sorting them. It's very complicated with javascript because you couldn't move the element to another position in the DOM. 

<div id="events">
//elements are positioned here
</div>
<div id="new-events">
//you can't simply move the elements to here
</div> 
<div id="new events">
//or to here
</div>

But you can use PHP with an array of events with their time.

<?php 
$events = array('2014-11-1' => array('title' => 'Haloween Party', 'date' => '2014-11-1'), '2014-10-10' => array('title' => 'Table dance party', 'date' => '2014-10-10'));
function only_new($name) {
    $date = strtotime($name['date']);
    return $date > time() ? $name : false;
}
$newEvents = array_filter($events, "only_new");
$oldEvents = array_filter($events, "only_old");
function only_old($name) {
    $date = strtotime($name['date']);
    return $date < time() ? $name : false;
}

echo '<hr>';
echo 'Old events:<br />';
var_dump($oldEvents);
echo '<br />';
echo '<hr>New events:<br />';
var_dump($newEvents);
echo '<hr>';
?>

Hope it helps ;)

jankal
  • 1,090
  • 1
  • 11
  • 28
  • thank you, I can use php ass well. I'm gona test this. – Marc Oct 31 '14 at 13:14
  • But you must then use something like var_dump($oldEvents); var_dump($newEvents); – jankal Oct 31 '14 at 13:22
  • oh god I really suck at this. doesn't show anything. needs to show the halloween party? – Marc Oct 31 '14 at 13:25
  • Yes it should. I'll test it here on localhost. Wait. – jankal Oct 31 '14 at 13:49
  • Here it worked. you can see an example at http://alexanderjank.de/php/sort/ I modiefied the date format to (YY-MM-DD) – jankal Oct 31 '14 at 13:55
  • ah echo, I thought it was possible to use html and only put the script between – Marc Oct 31 '14 at 14:07
  • Yes it would be possible. Let me explain. the two variables $oldEvents and $new Events are containing both an array. You can loop trough an array via: `echo '
    Old events:
    '; foreach($oldEvents as $key => $value) { echo 'Event: '.$value['title']; echo ' Date: '.$value['date']; echo '
    ';} echo '
    New events:
    '; foreach($newEvents as $key => $value) { echo 'Event: '.$value['title']; echo ' Date: '.$value['date']; echo '
    ';} ` Replace this with `echo '
    '; echo 'Old events:
    '; var_dump($oldEvents); echo '
    '; echo '
    New events:
    '; var_dump($ne ...`     – jankal Oct 31 '14 at 14:20
0

You can get the current date in JavaScript by using Date() as referenced here.

Then you can check if the date of the event is before or after the current date and add a class to hide as appropriate.

In terms of sorting for JavaScript, there's no point in rebuilding the wheel, List.js has been fantastic for me. Simple to use and extremely lightweight.

Community
  • 1
  • 1
Paul
  • 111
  • 5