https://github.com/joe-watkins/whatsup-js

Introducing whatsUp.js a simple jQuery plugin for showing upcoming events
https://github.com/joe-watkins/whatsup-js

Last synced: 10 days ago
JSON representation

Introducing whatsUp.js a simple jQuery plugin for showing upcoming events

• Host: GitHub
• URL: https://github.com/joe-watkins/whatsup-js
• Owner: joe-watkins
• Created: 2014-01-31T17:46:01.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2014-02-28T02:49:40.000Z (almost 11 years ago)
• Last Synced: 2024-04-15T22:36:01.778Z (9 months ago)
• Language: CSS
• Size: 270 KB
• Stars: 6
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Introducing whatsUp.js

A jQuery plugin written to make wrangling upcoming events easier. Let's say you have a list of events outputted to the page and you only want to show the next 5 upcoming events from today's date.... whatsUp.js to the rescue.

whatsUp.js leverages Date.js for date handling.

Visit the [demo page](http://codepen.io/joe-watkins/full/sKmEb)

## How Do I Use It?

Create a list of dates

```html

 


  


...

  


...

  


...

 

```


Hide the list items with CSS. The plugin will add a custom class to the item to show it. Here is what is being done in the demo

```css

 ul.dates li {display: none; }

 ul.dates li.on {display: block; }

```

Include jQuery 1.10+, date.js, and whatsUp.js - initialize the plugin by binding it to an element.

```html

 

 

 

  $(document).ready(function(){

    $("ul.dates").whatsUp();

  });

 

```

### Default Output

Here we are targeting an unordered list and outputting the next 5 events, and rewriting the date to each list item in a different format than what the data-date attribute owns.

```html

	

	  $("ul.dates").whatsUp({

	    items :           'li', // list items

	    output:           'default', //default, dateWindow

	    howMany:          5, // how many events to show

	    rewrite:          true, // will inject a fancy date

	    rewriteTarget:    'span.date', // target of fancy date

	    rewriteFormat:  	'MMMM dS yyyy', // format of fancy date

	    visibleClass:     'on' // class to add to list item

	  });

	

```

The plugin will iterate through list items looking for a `data-date` attribute eg `data-date="01-Nov-2014"` by default. It will show you the next 5 events from today's date. There are many options you can set. You can even define a date window from today's date to show a certain number of events. The plugin can handle multiple date formats. Suggested format: `01-Nov-2014`

### Date Window Output

You can also simply define a date window to show events. If an event's date is within the given date window it will be shown.

```html

	

	  $("ul.dates").whatsUp({

	    output:           'dateWindow', //default, dateWindow

	    dateWindowStart:  '01-Jan-2014',

	    dateWindowEnd:  '05-Mar-2014'

	  });

	

```

Trigger the dateWindow output by changing the ```output``` to ```dateWindow``` then define a dates in ```dateWindowStart``` and ``` dateWindowEnd``` options. The ```howMany``` option has no effect in this case.

## Changelog

* _02.26.14 - v1.3.0 - 4kb_

	* Fixed JS bug having to do with a hardcoded value forcing the user to use `
` for list items.

* _02.02.14 - v1.2.0 - 4kb_

	* Added dateWindow functionality

* _01.31.14 - v1.0.0 - 4kb_

	* Initial release


## Credits

@_josephwatkins