smd_calendar: complete schedule / event / calendar / diary

Bloke · 2014-12-16 11:19:08

Gallex wrote #286614:

can anybody provide me this little jquery code?

Certainly. Code is below. Assumptions are:

You have a recent jQuery loaded on the page.
You have a div surrounding your calendar called myCalendar.
You haven’t changed any of the calendar attributes which manage the navigation aspects (e.g. class names, etc).

Put the following code anywhere on your page after jQuery has loaded, except inside your calendar div:

<script>
$(function() {
   $('#myCalendar').on('click', '.smd_cal_navnext, .smd_cal_navprev', function(ev) {
      ev.preventDefault();
      $('#myCalendar').load($(this).attr('href') + ' #myCalendar table');
   });
});
</script>

That will simply:

Intercept any clicks to the calendar’s nav elements.
Prevent the default click action from firing.
Call jQuery’s .load() method using the URL of the nav element (the current page + calendar params), passing it the div from which you want to load the content. When fetched, the content is scanned for the calendar block myCalendar, the HTML is extracted and injected into the div on the page that houses the calendar. In this case they’re both the same div, hence the duplication of #myCalendar in the call to .load().

Note it won’t intercept any month/year <select> tags if you have those in your calendar. That’s a fair bit more involved.

Hope that helps.

EDIT: better filter. See here.

Last edited by Bloke (2014-12-16 13:28:35)

Gallex · 2014-12-16 12:47:56

absolutly brilliant, bloke!! thank you!
you can see it in the action here

Last edited by Gallex (2014-12-16 12:48:45)

Bloke · 2014-12-16 13:27:20

Gallex wrote #286630:

absolutly brilliant, bloke!! thank you!

No problem. Glad it worked. One thing I just spotted is that jQuery is pulling the full content including the div and injecting it inside the div on the page. That means after the first nav click you get two div containers with the same ID on the page. To combat this, you should alter the .load() call like this:

$('#myCalendar').load($(this).attr('href') + ' #myCalendar table');

By asking it to go and fetch the myCalendar id and then find the table inside, you only get the table returned to you, which is then injected inside the myCalendar div on the page.

Sorry about the mix-up. I’ll amend the post above.

Gallex · 2014-12-16 14:08:32

yeah, i noticed that too, but now – no more duplicated div’s.

ps. maybe you should put this (my issue) into the plugin? ;) possible?

Bloke · 2014-12-16 14:37:12

Gallex wrote #286634:

maybe you should put this (my issue) into the plugin? ;) possible?

The main reason I’ve not done it, is because there are a zillion attributes already which weigh the plugin down. So adding more attributes to try and second-guess how people will use the plugin makes it quite tricky to build a universal AJAX system. For example:

What container name / id is in use. This is easy if the wraptag / html_id attributes are used, but if you do it outside the calendar plugin, it’s more difficult.
Whether you’re going to put more than one calendar per page.
Whether you’re going to use select lists for month/year.
Whether you’ve reconfigured the classes or manually built header content.
Whether you want article content in date cells to also popup without page refresh.
…

You can see the predicament. That’s why, for the sake of a few lines of jQuery, it’s currently up to site admins to implement any extras like this.

I would like to be able to make it easier for building this kind of thing with the plugin, but I don’t know how it can be done flexibly enough to cover most likely scenarios.

MattD · 2015-02-28 21:54:40

It seems when I click a date the url doesn’t include the m and y attributes, making the calendar go back to the current date, even if I add m and y to the maintain value. Is there another way to make the calendar stay where it was when clicked?

Bloke · 2015-03-01 08:55:27

MattD wrote #288661:

Is there another way to make the calendar stay where it was when clicked?

Yes. The maintain attribute is only for when navigating the calendar using the next/prev month links. To add date portions to your URL you need to alter your event anchor to include them, a bit like this:

<txp:smd_calendar section="events">
   <a href="?y=<txp:smd_cal_info type="year" />&m=<txp:smd_cal_info type="month" />"><txp:title /></a>
</txp:smd_calendar>

MattD · 2015-03-01 18:06:33

Bloke wrote #288664:

Yes. The maintain attribute is only for when navigating the calendar using the next/prev month links. To add date portions to your URL you need to alter your event anchor to include them, a bit like this:

<txp:smd_calendar section="events">...

My issue is with the small calendar.

<txp:smd_calendar size="small" section="events" emptyclass="cal-emtpy" maintain="section,date,m,y"/>

Bloke · 2015-03-01 21:06:47

MattD wrote #288673:

My issue is with the small calendar.

Then you’ll need to emulate/fake the behaviour of the small calendar using the full-size one. The minical is quite limited in what it can do — it’s just a throwback to this plugin’s roots in mdp_calendar.

There are a few examples dotted around the forum of making a faux minical (that’s one such example, though it’s not complete).

MattD · 2015-03-04 19:06:46

Sorry to bother but I’m banging my head. How do I get <txp:smd_article_event /> to display a list of events for a specific day, including recurring events?

Bloke · 2015-03-05 23:43:21

MattD wrote #288753:

How do I get <txp:smd_article_event /> to display a list of events for a specific day, including recurring events?

In theory, for today:

<txp:smd_article_event stepfield="custom_N" time="today">
   <txp:permlink><txp:title /></txp:permlink>
</txp:smd_article_event>

Where N is the custom field number that contains your recurring event definitions.

For specific days, you swap out time="today" for:

from='<txp:smd_cal_now now="yyyy-mm-dd 00:00:00" />'
to='<txp:smd_cal_now now="yyyy-mm-dd 23:59:59"

Of course, the dates themselves can be injected from anywhere: a txp:variable, from the URL via adi_gps, etc…

If that doesn’t work, what have you tried so far?

Last edited by Bloke (2015-03-05 23:47:23)

MattD · 2015-03-06 01:27:38

Bloke wrote #288784:

If that doesn’t work, what have you tried so far?

Finally got it working with your tip. Ended up using this

<txp:smd_article_event 
	stepfield="custom_3" 
	section="events" 
	from='<txp:variable name="article-date"/> 00:00:00'
	to='<txp:variable name="article-date"/> 23:59:59' 
	form="event-article"/>

where article-date is a variable with the format yyyy-mm-dd.

Thanks for your help and the great plugin.

Last edited by MattD (2015-03-10 13:16:34)

Textpattern CMS

Textpattern CMS support forum

#853 2014-12-16 11:19:08

Re: smd_calendar: complete schedule / event / calendar / diary

Gallex wrote #286614:

#854 2014-12-16 12:47:56

Re: smd_calendar: complete schedule / event / calendar / diary

#855 2014-12-16 13:27:20

Re: smd_calendar: complete schedule / event / calendar / diary

Gallex wrote #286630:

#856 2014-12-16 14:08:32

Re: smd_calendar: complete schedule / event / calendar / diary

#857 2014-12-16 14:37:12

Re: smd_calendar: complete schedule / event / calendar / diary

Gallex wrote #286634:

#858 2015-02-28 21:54:40

Re: smd_calendar: complete schedule / event / calendar / diary

#859 2015-03-01 08:55:27

Re: smd_calendar: complete schedule / event / calendar / diary

MattD wrote #288661:

#860 2015-03-01 18:06:33

Re: smd_calendar: complete schedule / event / calendar / diary

Bloke wrote #288664:

#861 2015-03-01 21:06:47

Re: smd_calendar: complete schedule / event / calendar / diary

MattD wrote #288673:

#862 2015-03-04 19:06:46

Re: smd_calendar: complete schedule / event / calendar / diary

#863 2015-03-05 23:43:21

Re: smd_calendar: complete schedule / event / calendar / diary

MattD wrote #288753:

#864 2015-03-06 01:27:38

Re: smd_calendar: complete schedule / event / calendar / diary

Bloke wrote #288784:

Board footer