Jump to content

Repeating Events: Multiple Dates/Times for Datepicker?

renobird

By renobird,
in Wishlist & Roadmap

 Share

Recommended Posts

renobird Hero Member

renobird

Posted
Posted

I'm in the process of building a pretty intense calendar with PW.

A lot of our events are recurring, usually on different days with different times, but otherwise they are exactly the same.

For example, we may have performance in Theatre that happens on

10/18 @ 6pm

10/19 @ 8pm

10/20 @ 8pm

10/21 @ 4pm

All other details of the event are the same.

I'm dreaming of a version of the datepicker that would allow you to pick multiple dates/times for an event.

Usage: Click on a day in the datepicker and set the time for that day, then click another date and set the time, etc...

So it's just like the current date picker, except you can add more than one date/time.

The values would be stored comma separated.

I found this JQuery plugin for multiple date selection, but it doesn't do time as well.

http://multidatespickr.sourceforge.net

I have no idea if this is even feasible to implement, just throwing it out there.

:)

Link to comment
Share on other sites
renobird Hero Member

renobird

Posted
  • Author
Posted

Hi Ryan,

That's what I have now, but when I tested it today with a group of users, they were confused by it.

They didn't understand that they needed to save before the next set of fields would show up.

(I know it says that clearly — not sure why they didn't seem to get it.)

Once I showed them that, they were still not thrilled. This was a group of interns who will be managing the calendar.

I can see their point, if an event has like 15 dates that a scattered through the month.

Just dreaming of other solutions.

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted
They didn't understand that they needed to save before the next set of fields would show up.

This is what the 'ready pages' setting is for. You may want to bump it up to 2, 3 or higher-- whatever typical repetition you would have. The only other way I can think of that you could do this would be to stuff a bunch of predefined date fields on the template. And this would be a fine way to go if you knew you were never going to have more than 4, or some other predefined amount. But for an unknown quantity, I think repeaters would be hard to beat here (at least, I can't think of anything else short of a custom Fieldtype/Inputfield).

Link to comment
Share on other sites
renobird Hero Member

renobird

Posted
  • Author
Posted

Thanks Ryan,

I managed to sort this out by sticking with the repeater option, but instead of using a repeater as a singular method for date entry, I used it for "additional dates". That way, the majority of events are entered with a typical start/end date, but events with more complicated schedules can use the repeater. I set the ready fields to 2, that seems like a good place to start. I think this will be less confusing to the people entering events — at least I hope. :)

See attached. (note: tweaked the admin via FieldSet to create 2 columns for calendar entry, I love how flexible PW is.)

post-474-0-93236200-1351026530_thumb.png

  • Like 6
Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
Posted

You just create fieldsets and use width column option. The trick then is to hide the fieldset label via css. Ive done it myself with teflon theme and will soon update it with same approach and also made the field labels white to remove cluttr.

  • Like 6
Link to comment
Share on other sites
renobird Hero Member

renobird

Posted
  • Author
Posted

Just as Soma mentioned, use the FieldSet field type to create your columns, and then set their width so they float next to each other.

In my case I made 3 FieldSet columns. (column_1, column_2, column_3) — although I only used 2 columns in the screenshot above.

I didn't want to change how the admin looked anywhere other than within these columns, so the only thing I changed about the default theme was a few lines of CSS that are specific to these columns.

You can grab the CSS here

  • Like 5
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted
See attached. (note: tweaked the admin via FieldSet to create 2 columns for calendar entry, I love how flexible PW is.)

Wow this needs to be made into an admin theme. I really like the look of this!

  • Like 1
Link to comment
Share on other sites
Pete Hero Member

Pete

Posted
Posted

I really like this implementation of columns and am going to use it on a few sites soon I think to make better use ot the page - ryan, could there be an option in the fieldset options to hide the title rather than what's been done above (hidden by CSS)?

Not that there's anything wrong with using field widths of course, but this way that had a combination of the two does look neater in my opinion, and certainly adds more options.

I wonder if there's scope to include some things like this in the default site profile too - just to show some more possibilities out of the box? Only problem of course is that I can't think of any of the default templates that would use this fieldset-as-solumns layout.

Link to comment
Share on other sites
  • 2 weeks later...
Michael Murphy Sr. Member

Michael Murphy

Posted
Posted

Hey Antti, I also agree with you about the boxy feel. I have just been playing with the repeater element and tried to reduce the boxyness and make it similar to Renos style. Here is a screenshot

post-116-0-01100600-1352205114_thumb.png

This is not fully tested and will probably break other stuff, but here is the css I used so far


.Inputfields > .InputfieldRepeater > .ui-widget-content {

padding: 0;
border:none;

}
.Inputfields > .InputfieldRepeater > .ui-widget-content .Inputfields > .Inputfield > .ui-widget-content  {

padding: 5px;
border-color: #e6e6e6; 
} 

/*add a dropshadow to the repeater inputfields */
.Inputfields > .InputfieldRepeater > .ui-widget-content .Inputfields > .Inputfield > .ui-widget-content .Inputfield {

-webkit-box-shadow: 1px 4px 5px -3px rgba(0, 0, 0, .1);
box-shadow: 1px 4px 5px -3px rgba(0, 0, 0, .1);

}

.ui-widget-content {

border-color: #e6e6e6; 
}

.Inputfields .ui-widget-header {

border-bottom:none;
border-color: #e6e6e6; 
background: #ffffff;
}

.InputfieldStateCollapsed .ui-widget-header {

border: 1px solid #e6e6e6; 
}

/*this is the repeater element handle, changing it to a solid color */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: none;
background: #b3b3b3;
}
  • Like 2
Link to comment
Share on other sites
Pete Hero Member

Pete

Posted
Posted

Back to repeaters a minute - I think that a little AJAX would vastly improve the "flow" here.

If it were altered to show a loading icon when you add a new item and then load it via AJAX without reloading the page then I think that that would be preferable if it's possible? I think the reloading can feel a bit clunky if you are using repeaters a lot, as can setting it to automatically set up X default repeater items when you're rarely sure how many you might need.

  • Like 1
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

Not possible, at least not in a way that would be compatible with all fieldtypes. Not all fieldtypes are ajax compatible. Take TinyMCE for instance, which would need a totally different approach to being dynamically instantiated on a page like that, if it's even possible. I wouldn't want to place this burden on Inputfield module developers. It would always be a question of "is this Inputfield repeater compatible?". For instance, any Inputfield that initializes with it's own $(document).ready() wouldn't be compatible. The whole idea of "ready pages" are a compromise to provide a way around this.

  • Like 1
Link to comment
Share on other sites
Pete Hero Member

Pete

Posted
Posted

Every time I think about making it AJAX I forget the more complex inputfields - totally understand it when you take into account the other types.

Thanks for the explanation ryan!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...