Current status of the Ning Platform is always available on the Ning Status Blog.

This tip will allow you to add a widget to any page which will check against your events and display events that are in the current month and if none will let your members know there are no events so far for this month. It's easy to add and will show you how below. You will also see a couple of images showing how it's displayed.

You can also see it working on my sites homepage here:  https://gromsquad.ning.com/

NOTE: This works only on an event page that is named events, if you have named your something else you can edit the part in bold to change it if required.

DEMO IMAGES

With events for the month

And the display with no events

Here is how to set it up

1. Go to your Social Site Manager Then Pages

2. Choose a page where you want to add the widget

3. Select Add Content

4. Select content type to events

5. Add this as the title IMPORTANT:  eventsMonthWidget

6. Display: set to titles

7. From: upcoming events

8. Show: 1

9. Length: 250

Then click the Add button and it will appear on the page. Click and hold to move it to where you want it then Save the page. Once the page is saved you can then add the code below.

Example of the setup, note I chose Display as detail but Titles is better. It doesn't matter which you choose

First we add a little CSS to our design studio custom css section. By the way if you want the module header a different colour than royal bluse just change the module header colour and the module name colour to what you want.

/*Widget Sections reveal dates and location*/
.eventsMonthWidget .eventPage-detail{
display:none
}
.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(1),
.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(2),
.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(3){
display:block!important
}

/* Style the widget */

.eventsMonthWidget .media-frame.eventPage-details > .eventPage-image{
padding-top:33%
}
.eventsMonthWidget .media-frame > .eventPage-image{
max-width:100%
}
.eventsMonthWidget .eventPage-details .entry-title > a{
font-size:1.4em
}
.eventsMonthWidget .eventPage-details .entry-title > a:hover{
color:inherit
}
.eventsMonthWidget .module-header{
background-color:royalblue; border-radius:6px 6px 0px 0px
}
.eventsMonthWidget .module-name{
color:white
}
.section-eventBundle.eventsMonthWidget .media-frame {
margin-bottom: 15px; border:none
}

 

Next we need to add some custom code and this goes in the custom code end of page section via the Social Site Manager

Note: remember this was set up for the default name of the page being called Events. If your is different then edit the events name seen in bold.

<script>
/*Events Month List Widget Code, John Bizley 13-04-2019*/
x$(document).ready(function(){
x$('.module-name:contains(eventsMonthWidget)').hide().closest('.section-eventBundle').addClass('eventsMonthWidget');
x$('.eventsMonthWidget .module-name').text('Events This Month').show();
x$('.eventsMonthWidget .module-body').html('<h1 class="eventsMonthWidget-updating">Updating...</h1>');
x$('.eventsMonthWidget .module-body').load("/events .eventListPage .entry .media-frame.eventPage-details", function(){
//NOW RUN THE CODE TO UPDATE THE MODULE FOR THE DATES
//SHOW EVENTS ONLY FOR THE MONTH YOU ARE IN
var WidgetClass = x$('.module-name:contains(eventsMonthWidget)').closest('.section-eventBundle').addClass('eventsMonthWidget');
var monthsDisplay = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var now = new Date();
var month = months[now.getMonth()];
var monthDisplay = monthsDisplay[now.getMonth()];
var monthselector = ".section-eventBundle.eventsMonthWidget ul:nth-child(1) > li:nth-child(2) > a:nth-child(1):contains("+ month +")";
var monthClass = x$(monthselector).closest('.media-frame').addClass(month);
var presentMonth = monthClass;
var notThisMonth = x$('.section-eventBundle.eventsMonthWidget .media-frame');
notThisMonth.not(presentMonth).remove();
var eventsPresentCount = presentMonth.length;
if(eventsPresentCount <=0){
x$('.section-eventBundle.eventsMonthWidget .module-name').text('No Upcoming '+monthDisplay+' Events');
}else if(eventsPresentCount === 1){
x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Event');
}else{
x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Events');
}
x$('.section-eventBundle.eventsMonthWidget .module-footer > a.pull-right').text('View All Events');
x$('.column-narrow .section-eventBundle.eventsMonthWidget .module-name').css('text-align','center');
x$('.eventsMonthWidget .span6.narrow16.tablet16.mobile16').hide();
});
});
</script>

 

That's it, coming next will be how to style the actual events page list to help seperate the events by month.

Enjoy

Bizz :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Steve Ewing replied to Steve Ewing's discussion
Dumb Question of the day #2
" Jack of Ning support,If you see this,,,Everything you mentioned has been checked and then double…"
yesterday
Garfield Archivist replied to Bizz's discussion
Congratulate Birthday Tip ( work in progress Updated 25/07 )
"Great Job! I can handle the email part and we will have a full package. This is ideal for a…"
Monday
Bizz replied to Bizz's discussion
Congratulate Birthday Tip ( work in progress Updated 25/07 )
"Added some updates to this post for you to see, Friends notification in profile page of Birthdays…"
Sunday
Bizz posted a discussion
Ok so this one is a weird one as only found this out while trying out members birthday idea.What I…
Sunday
Jack Ning Support replied to Steve Ewing's discussion
Dumb Question of the day #2
"Hey there, Steve Ewing,
You should check the Email Digest settings on the members -> email settings…"
Saturday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TIP TOP TRICK ← Organic SEO and Your Community using Language Editor
"on your community's /main/profilesettings/connection page,
Would you Rather?
OR"
Friday
Rosas † Negras replied to Rosas † Negras's discussion
I need more length of the html box who can help me?
"thank you very much i managed to solve the problem you are a kind man as always"
Friday
⚡JFarrow⌁ posted a discussion
Ok, the more i think about it, the more this may become the part one of about a 3 part series. …
Friday
Bizz replied to Rosas † Negras's discussion
I need more length of the html box who can help me?
"Not sure what you mean ?"
Friday
Rosas † Negras liked Bizz's discussion Congratulate Birthday Tip ( work in progress Updated 25/07 )
Friday
Rosas † Negras posted a discussion
I need more length of the html box who can help me?
Friday
⚡JFarrow⌁ updated their profile photo
Jul 22
More…

Meanwhile, you can check our social media channels